详解flex布局

最新推荐文章于 2022-08-23 18:30:22 发布

渣渣前端

最新推荐文章于 2022-08-23 18:30:22 发布

阅读量281

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/dtbk123/article/details/91347627

版权

前端专栏收录该内容

74 篇文章 0 订阅

订阅专栏

所谓flex布局，就是弹性盒模型布局。容器拥有两根隐形的轴，水平的主轴（main axis），和竖直的交叉轴。主轴开始的位置，即主轴与右边框的交点，称为main start；主轴结束的位置称为main end；交叉轴开始的位置称为cross start；交叉轴结束的位置称为cross end。item按主轴或交叉轴排列，item在主轴方向上占据的宽度称为main size，在交叉轴方向上占据的宽度称为cross size。此外，需注意使用flex容器内元素，即flex item的float，clear、vertical-align属性将失效

下面通过代码来看一下

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        .box1 {
            display: flex;
            width: 400px;
            height: 300px;
            margin: 20px auto;
        }

        .box1 li {
            width: 90px;
            background-color: crimson;
            border: 1px solid black;
            height: 200px;
        }

        .box2 {
            width: 400px;
            height: 300px;
            margin: 20px auto;
        }

        .box2 li {
            float: left;
            width: 90px;
            background-color: crimson;
            border: 1px solid black;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </div>
    <div class="box2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </div>
</body>

</html>

可以看到父元素设置为flex布局时，如果子元素的宽度超出父元素的宽度，它就像弹簧一样压缩，把子元素的宽度变小，而不会出现像浮动一样的高度坍塌，而画在图上的两个箭头就是水平的主轴和竖直的交叉轴。

flex-direction决定主轴的方向，

row:主轴为水平方向，项目沿主轴从左至右排列

column：主轴为竖直方向，项目沿主轴从上至下排列

row-reverse：主轴水平，项目从右至左排列，与row反向

column-reverse：主轴竖直，项目从下至上排列，与column反向

flex-wrap

nowrap：自动缩小项目，不换行

wrap：换行，且第一行在上方

wrap-reverse：换行，第一行在下面

flex-flow

是flex-direction和flex-wrap的简写形式，如：row wrap|column wrap-reverse等。默认值为row nowrap，即横向排列不换行。

justify-content

决定item在主轴上的对齐方式，可能的值有flex-start（默认），flex-end，center，space-between，space-around。当主轴沿水平方向时，具体含义为

flex-start：左对齐 flex-end：右对齐 center：居中对齐 space- between：两端对齐 space-around：沿轴线均匀分布

渣渣前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
详解flex布局

所谓flex布局，就是弹性盒模型布局。容器拥有两根隐形的轴，水平的主轴（main axis），和竖直的交叉轴。主轴开始的位置，即主轴与右边框的交点，称为main start；主轴结束的位置称为main end；交叉轴开始的位置称为cross start；交叉轴结束的位置称为cross end。item按主轴或交叉轴排列，item在主轴方向上占据的宽度称为main size，在交叉轴方向上占据的宽度...
复制链接

扫一扫