弹性布局详解

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

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

依旧是拿ul和三个li为例

xml 复制代码
<!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的高度

css 复制代码
ul {
    height: 100vh;
}

过一遍所有的属性

css 复制代码
ul {
    display: flex;
}

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

css 复制代码
ul {
    display: flex;
    flex-direction: row-reverse;
}

主轴翻转,从右往左排布

css 复制代码
ul {
    display: flex;
    flex-direction: column-reverse;
}

交叉轴翻转,从下往上排

css 复制代码
ul {
    display: flex;
    flex-wrap: wrap;
}

超出则换行

css 复制代码
ul {
    display: flex;
    flex-flow: row nowrap;
}

flex-flowflex-directionflex-wrap的合体。主轴是x轴且不换行,还是默认效果

css 复制代码
ul {
    display: flex;
    justify-content: center;
}

主轴居中

css 复制代码
ul {
    display: flex;
    justify-content: flex-start;
}

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

css 复制代码
ul {
    display: flex;
    justify-content: flex-end;
}

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

css 复制代码
ul {
    display: flex;
    justify-content: space-around;
}

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

css 复制代码
ul {
    display: flex;
    justify-content: space-between;
}

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

css 复制代码
ul {
    display: flex;
    align-items: center;
}

交叉轴居中

css 复制代码
ul {
    display: flex;
    align-items: flex-start;
}

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

css 复制代码
ul {
    display: flex;
    align-items: flex-end;
}

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

css 复制代码
ul {
    display: flex;
    align-items: baseline;
}

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

css 复制代码
ul {
    display: flex;
    align-items: stretch;
}

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

css 复制代码
ul {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

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

css 复制代码
ul {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

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

css 复制代码
ul {
    display: flex;
}
.item2 {
    order: -1;
}

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

css 复制代码
ul {
    display: flex;
}
.item2 {
    flex-shrink: 0;
}

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

css 复制代码
ul {
    display: flex;
}
ul li {
    flex-grow: 1;
}

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

css 复制代码
ul {
    display: flex;
}
ul li {
    flex-basis: 250px;
}

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

css 复制代码
ul {
    display: flex;
}
ul li {
    flex: 1;
}

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

css 复制代码
ul {
    display: flex;
}
ul li {
    flex: 1 1 300px
}

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

最后

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

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

相关推荐
木木黄木木13 分钟前
HTML5手写签名板项目实战教程
前端·html·html5
程序员鱼皮17 分钟前
2025最新 Java 面经:美团后端面试真实复盘,附答案模板,速速收藏!
java·后端·面试
uhakadotcom19 分钟前
OpenAI 的 PaperBench:AI 研究复现基准测试工具
算法·面试·github
姑苏洛言36 分钟前
基于微信小程序实现幸运大转盘页面
前端
前端极客探险家38 分钟前
如何实现一个支持拖拽排序的组件:React 和 Vue 版
前端·vue.js·react.js·排序算法
yanyu-yaya42 分钟前
devextreme-react/scheduler 简单学习
前端·学习·react.js
limit for me1 小时前
react使用eventBus在不同模块间进行通信
前端·react.js
__不想说话__1 小时前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
一个小潘桃鸭1 小时前
需求:对表格操作列中的操作进行局部刷新
前端
番茄比较犟1 小时前
Combine知识点switchToLatest
前端