弹性布局详解

站长

2024年03月13日 18:56 · 阅读数 18

弹性布局是css的一种布局方式，可以完整响应式的实现页面的布局，这里的响应式指的是可随页面变大变小，弹性容器中默认存在两条轴，主轴和交叉轴，主轴默认为x轴

可以用flex-direction: column来修改主轴为y轴

依旧是拿ul和三个li为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul li {
            list-style: none;
            width: 200px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <ul>
        <li class="item1">1</li>
        <li class="item2">2</li>
        <li class="item3">3</li>
    </ul>
</body>
</html>

默认效果如下

弹性布局详解

现在给ul加上一个display: flex，那么ul里面的东西都会脱离文档流，这个时候想要其继续实现下面的效果，需要给ul单独加上个100vh的高度

ul {
    height: 100vh;
}

过一遍所有的属性

ul {
    display: flex;
}

三个li会横向排布，默认从左往右

ul {
    display: flex;
    flex-direction: row-reverse;
}

主轴翻转，从右往左排布

弹性布局详解

ul {
    display: flex;
    flex-direction: column-reverse;
}

交叉轴翻转，从下往上排

弹性布局详解

ul {
    display: flex;
    flex-wrap: wrap;
}

超出则换行

弹性布局详解

ul {
    display: flex;
    flex-flow: row nowrap;
}

flex-flow是flex-direction和flex-wrap的合体。主轴是x轴且不换行，还是默认效果

ul {
    display: flex;
    justify-content: center;
}

主轴居中

弹性布局详解

ul {
    display: flex;
    justify-content: flex-start;
}

居主轴方向起始位置，默认就是居左

ul {
    display: flex;
    justify-content: flex-end;
}

居主轴方向终点位置，默认就是居右

弹性布局详解

ul {
    display: flex;
    justify-content: space-around;
}

给每个子容器都添加相同的间隙

弹性布局详解

ul {
    display: flex;
    justify-content: space-between;
}

第一个子元素最左，第二个元素最右，其余子元素均匀分布

弹性布局详解

ul {
    display: flex;
    align-items: center;
}

交叉轴居中

弹性布局详解

ul {
    display: flex;
    align-items: flex-start;
}

居交叉轴方向起点位置，默认就是居上，就是默认效果

ul {
    display: flex;
    align-items: flex-end;
}

居交叉轴方向终点位置，默认就是居下

弹性布局详解

ul {
    display: flex;
    align-items: baseline;
}

对准文字基线，就是默认效果

ul {
    display: flex;
    align-items: stretch;
}

交叉轴默认对齐方式，默认效果

ul {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

超出换行时，居上对齐，center为居中，flex-end为居下

ul {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

超出换行时，居交叉轴分布均匀，space-around即填充空格

ul {
    display: flex;
}
.item2 {
    order: -1;
}

order控制子元素的排列顺序，默认值为0，顺序是从小到大，也就是越小越靠前

弹性布局详解

ul {
    display: flex;
}
.item2 {
    flex-shrink: 0;
}

控制item2就是不缩小，flex-shrink默认值为1

ul {
    display: flex;
}
ul li {
    flex-grow: 1;
}

flex-grow的默认值为0，就是超出默认大小时不放大，若为1，超出时也放大，占满整个宽度

ul {
    display: flex;
}
ul li {
    flex-basis: 250px;
}

权重比宽高高,这个是初始尺寸的宽

ul {
    display: flex;
}
ul li {
    flex: 1;
}

1比1的比例继承父容器的宽度，因此三个li占满屏幕

ul {
    display: flex;
}
ul li {
    flex: 1 1 300px
}

三个参数分别对应flex-grow flex-shrink flex-basis，因此就是会放大，会缩小，基础宽度为300，0 0 300 就是既不放大也不缩小

最后

弹性布局的属性看着多，其实也还好，align就是纵向轴，justify就是主轴，弹性容器可控制主轴和交叉轴的对齐方式，以及收缩比，排列布局方式，其应用场景最多就是作居中和三栏布局

另外有不懂之处欢迎在评论区留言，如果觉得文章对你学习有所帮助，还请”点赞+评论+收藏“一键三连，感谢支持！