flex布局，思路，案例实践

亦随
189 阅读2分钟

移动端

1特点和原理：

1.解决不同手机清晰度加载不同清晰度照片的代码写法

   

2.布局视口

  <!-- 没有以下这组代码的都是布局视口，老技术默认宽度980px -->
    <!-- 有以下这组代码的是理想视口，能自动匹配各种屏幕的宽度 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

3.理想视口详细介绍

1.flex布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: aquamarine;
            /* flex布局又称弹性布局，如果想要弹性布局就给父项加上 display: flex;小技巧  df   就能出来 */
            /* 发生的变化：1.子项继承父项的高，宽由内容撑开
                            2.flex布局里面的子项不再划分为块级。行内。行内块了，都可以设置宽高 */
            display: flex;
        }

        span {
            /* 浮动无效 */
            /* float: left; */
            /* margin  有效 */
            /* margin-top: 50px; */
            /* 位移有效 */
            /* transform: translateX(50px); */
            /* 定位有效 */
            /* position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px; */
            /* 默认情况下子项的宽大于父项也不会换行，而是压缩自己，
                结论：flex不会换行，之会压缩自身的宽度 */
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
    </div>
</body>

</html>

2.设置主轴对齐方式：justify-content

display: flex;

1.flex-start :左对齐

2.flex-end:右对齐

3.center:居中

4.space-beween:先两侧对齐，然后平分中间的宽 记忆方式加小技巧 sb

5.space-around：每个子项两边的间隔一样，所以中间的的间隔会比较大 记忆方式加小技巧 sd

6.space-evenly：绝对平分，每个子项的间隔都是一样大的 记忆方式加小技巧 sv

3.侧轴对齐方式之单行：align-items

display: flex;

  1. 侧边上对齐

​ align-items: start;

​ 2. 侧边下对齐

​ align-items: end;

​ 3.侧边栏居中

​ align-items: center

​ 4. 默认值，如果子项没有了高度，会默认继承父项的高度

​ align-items: stretch;

4.侧轴对齐方式之多行：align-content

display: flex;

  1. 多行:上对齐

​ align-content: flex-start;

2.多行:下对齐

​ align-content: flex-end;

  1. 多行:居中

​ align-content: center;

4.多行：先两侧对齐，然后平分中间的宽 记忆方式加小技巧 sb

​ align-content: space-between;

  1. 多行:每个子项两边的间隔一样，所以中间的的间隔会比较大 记忆方式加小技巧 sd

​ align-content: space-around;

​ 6. 多行:绝对平分，每个子项的间隔都是一样大的 记忆方式加小技巧 sv

​ align-content: space-evenly;

（总结：侧轴多行的书写方式和主轴对齐的属性差不多，关键在于前面的属性）

5.水平垂直居中

​ display: flex;

  1. 水平居中

​ justify-content: center;

  1. ​ 垂直居中

​ align-items: center;

两行代码实现水平垂直居中

5.换行：

flex只有这一种方法， flex-wrap: wrap;在父项设置，当一行装不下的时候会自动换行，无法具体选中换行

6.修改主轴方向：

7. 每个子项占父项宽度的份额

​ flex: 1;

8.子项侧轴单独选中对齐方式：align-self

​ span:nth-child(3) {

​ /* 子项单独选择居中 */

​ /* align-self: center; */

​ /* 子项单独选中靠上 */

​ /* align-self: start; */

​ /* 子项单独选中靠下 */

​ align-self: end;

​ /* (总结:就是单独选中某个子项, 给他设置对齐方式, 代码:align-self +方位代码) */

​ }

9.随堂案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            /* 清除默认的内外边距 */
            margin: 0;
            padding: 0;
            /* c3盒子模型防止盒子被撑大 */
            box-sizing: border-box;
        }

        ul {
            /* 讲ul变为flex布局 */
            display: flex;
            /* 设置可以换行 */
            flex-wrap: wrap;
            /* 设置垂直方向的上下对齐方向 */
            align-content: space-around;
            /* 设置水平方向的左右对齐方向 */
            justify-content: space-around;
            width: 1000px;
            height: 600px;
            background-color: #ccc;
            margin: 100px auto;
            list-style: none;
        }

        li {
            /* 将li变为flex布局,使里面的子项宽高可以生效 */
            display: flex;
            /* 改变主轴方向,因为flex盒子不会换行,所以主轴反过来 */
            flex-direction: column;
            /* 主轴方向反了,垂直方向的居中变成水平方向的居中 */
            align-items: center;
            /* 主轴方向反了,水平方向的对齐变换成侧边也是垂直方向的对齐 */
            justify-content: space-evenly;
            /* 用内边距挤压内容,使其贴合 */
            padding: 30px 0;
            /* 一个li占父项宽度的百分比 */
            width: 23%;
            /* 一个li占父项高度的百分比 */
            height: 47%;
            background-color: skyblue;
        }

        span {
            background-color: red;
            width: 50px;
            height: 50px;
        }

     
    </style>
</head>

<body>
    <ul>
        <li>
            <span></span>
            <h5>好看的</h5>
            <p>玛卡巴卡玛卡巴卡玛</p>
        </li>
        <li>
            <span></span>
            <h5>好看的</h5>
            <p>玛卡巴卡玛卡巴卡玛</p>
        </li>
        <li>
            <span></span>
            <h5>好看的</h5>
            <p>玛卡巴卡玛卡巴卡玛</p>
        </li>
        <li>
            <span></span>
            <h5>好看的</h5>
            <p>玛卡巴卡玛卡巴卡玛</p>
        </li>
        <li>
            <span></span>
            <h5>好看的</h5>
            <p>玛卡巴卡玛卡巴卡玛</p>
        </li>
        <li>
            <span></span>
            <h5>好看的</h5>
            <p>玛卡巴卡玛卡巴卡玛</p>
        </li>
        <li>
            <span></span>
            <h5>好看的</h5>
            <p>玛卡巴卡玛卡巴卡玛</p>
        </li>
        <li>
            <span></span>
            <h5>好看的</h5>
            <p>玛卡巴卡玛卡巴卡玛</p>
        </li>

    </ul>
</body>

</html>

总结：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;

            /* 宽度不够自动换行 */
            flex-wrap: wrap;


            /* 主轴对齐方式 */
            /* 主轴靠左对齐，默认方式 */
            /* justify-content: start; */
            /* 主轴靠右对齐 */
            /* justify-content: end; */
            /* 主轴居中 */
            /* justify-content: center; */
            /* 主轴靠边对齐 */
            /* justify-content: space-between; */
            /*  主轴两边留空，中间缝隙比两边大*/
            /* justify-content: space-around; */
            /* 主轴绝对平分 */
            /* justify-content: space-evenly; */
            /* 主轴居中 */
            /* justify-content: center; */

            /* 侧轴对齐方式 */
            /* 侧轴单行上对齐 ，默认方式(子项没高度会出问题)*/
            /* align-items: flex-start; */
            /* 侧轴单行下对齐 */
            /* align-items: flex-end; */
            /* 侧轴单行居中 */
            /* align-items: center; */

            /* 侧轴多行上对齐 */
            /* align-content: start; */
            /* 侧轴多行下对齐 */
            /* align-content: end; */
            /* 侧轴多行居中 */
            /* align-content: center; */
            /* 侧轴多行上下靠边对齐 */
            /* align-content: space-between; */
            /* 侧轴多行上下留边对齐 */
            /* align-content: space-around; */
            /* 侧轴绝对平分 */
            align-content: space-evenly;

            /* 主轴变换方向 */
            /* 默认值，从左到右 */
            /* flex-direction: row; */
            /* 从右到左 */
            /* flex-direction: row-reverse; */
            /* 从上到下 */
            /* flex-direction: column; */
            /* 从下到上 */
            /* flex-direction: column-reverse; */
            width: 600px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
        }

        span {
            width: 300px;
            /* 子项不设高度默认拉伸值父项的高度 */
            height: 100px;
            background-color: blue;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>
avatar
文章
阅读
粉丝