flex布局（设置主轴方向+侧轴单行对齐(多行对齐)+弹性盒子换行+辨别几倍图）

后来832
396 阅读1分钟

设置主轴方向

主轴默认是水平方向, 侧轴默认是垂直方向

修改主轴方向属性: flex-direction

image.png 语法：

flex-direction：column;

修改完毕，主轴是Y轴， 侧轴是X轴。

如何去算是几背图

精灵图的宽度/装精灵图盒子的宽度=倍数

修改主轴经常的使用场景：

比如：上图下文

image.png

弹性盒子换行

特性： 给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。

弹性盒子换行显示 : flex-wrap:

语法：

flex-wrap: wrap;

案例
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        /* 弹性容器 */
        .box{
            display: flex;
            width: 1000px;
            height: 600px;
            background-color: pink;
            margin: 0 auto;
            list-style: none;
            /* 解决方法:盒子换行 */
            /* 换行  重点记忆 */
            flex-wrap: wrap;
            /* 不换行 */
            flex-wrap: nowrap;
            /* 反向换行 */
            flex-wrap: wrap-reverse;
        }

        /* 弹性盒子 默认在一行排列,不会换行显示*/
        .box li{
            width: 250px;
            height: 200px;
            background-color: red;
        }

        .box li:nth-child(2n){
            background-color: aqua;
        }
    </style>
</head>
<body>
        <ul class="box">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
</body>
</html>

设置侧轴对齐方式

注意:

  1. 此处设置侧轴多行的垂直对齐方式。 align-content（少）
  2. 和前面学过的 align-items （侧轴单行垂直对齐） （多）
  3. align 垂直 比如 align-items 垂直对齐 align-content 多行垂直对齐
  4. content 主轴 justify-content align-content 侧轴多行对齐
align-content：center；

image.png

主轴排列方式（重点）

默认的水平，但是可以转换。

  1. 如果给父盒子添加 display: flex
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            /* 弹性容器 */
            display: flex;
            /* 主轴排列方向  默认是水平方向 */
            /* 垂直方向排列  使用最多 */
            flex-direction: column;
            /* 主轴居中 */
            justify-content: center;
            /* 侧轴居中 */
            align-items: center;
            /* 水平方向排列  默认值 */
            flex-direction: row;
            /* 水平方向从右往左排列 */
            flex-direction: row-reverse;
            /* 垂直方向从下往上排列 */
            flex-direction: column-reverse;
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 0 auto;
        }

        .box span{
            /* 弹性盒子 */
            width: 150px;
            height: 150px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>1</span>
    </div>
</body>
</html>

侧轴对齐方式-单行对齐

  1. 默认的对齐方式 stretch 拉伸
  2. 顶对齐 flex-start
  3. align-items: center; (重点)

侧轴对齐方式-多行

 <style>
        *{
            margin: 0;
            padding: 0;
        }

        /* 弹性容器 */
        .box{
            display: flex;
            width: 1000px;
            height: 600px;
            background-color: pink;
            margin: 0 auto;
            list-style: none;
            /* 换行  重点记忆 */
            flex-wrap: wrap;
            /* 侧轴居中  单行元素垂直排列方式 */
            /* align-items: center; */

            /* 侧轴居中 多行 (前提条件得有flex-wrap:wrap布局换行)元素垂直排列方式  快捷键ac */
            /* 多行居中 */
            align-content: center;
            /* 从起点开始排列 */
            align-content: flex-start;
            /* 从终点开始排列 */
            align-content: flex-end;
            /* 盒子上下两边靠边 */
            align-content: space-between;
            /* 盒子上下1:2进行排列 */
            align-content: space-around;
            /* 盒子上下1:1进行排列 */
            align-content: space-evenly;

        }

        /* 弹性盒子 默认在一行排列,不会换行显示*/
        .box li{
            width: 250px;
            height: 200px;
            background-color: red;
        }

        .box li:nth-child(2n){
            background-color: aqua;
        }
    </style>
</head>
<body>
        <ul class="box">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
</body>
</html>
avatar
文章
阅读
粉丝