flex布局
每一个项目都离不开前端的网页布局,网页布局也是CSS一个重点应用,系统来说,页面的布局都应该由前端来完成,不过作为后端人员,一些简单的样式就不需要依赖前端人员了。
传统的布局,都是基于盒子模型,依赖float、position定位,它对于一些特殊的布局非常不方便,比如,垂直居中。相信很多小伙伴对于垂直居中有些困扰吧。今天我们就来了解一下flex布局。
flex是Flexible Box的缩写,意为“弹性布局”,flex布局是w3c在2019年提出一种新的布局方案,它可以简便、完整、响应式的实现各种页面布局。现在所有的浏览器都支持flex。
采用flex布局的元素,称为flex容器(flex container),简称“容器”。它的所有子元素自动成为容器成员,简称为“项目”。
![](https://pics7.baidu.com/feed/37d12f2eb9389b509bd08817c5d3f6d8e6116eb7.jpeg?token=72bd8b25ace10e4c63daebd3b3ef3102&s=E82230728FA05F19516BC4CC020010BA)
容器默认存在两个轴:水平的主轴和垂直的交叉轴。主轴的开始位置叫做main start,结束位置叫做main end;交叉轴的开始叫cross start,结束位置叫cross end。
重点是要了解flex-container的属性:flex-direction,flex-wrap.justify-cotent,align-items,align-content。
一、flex-direction属性决定主轴的方向:
.box {flex-direction: row | row-reverse | column | column-reverse;}
1、row(默认值):主轴水平方向,起点在start。
2、row-reverse:主轴水平方向,起点在end。
3、column:主轴为垂直方向,起点在start。
4、column-reverse:主轴为垂直方向,起点在end。
![](https://pics5.baidu.com/feed/96dda144ad3459825832e26d331222a8c9ef8484.jpeg?token=b8117f5e4c66d75446a9bfaccd9049fe&s=34207C32C75AF628524984D002009033)
二、flex-wrap(一条轴线排不下如何换行):
.box{flex-wrap: nowrap | wrap | wrap-reverse;}
1、Nowarp:不换行,在一行显示
![](https://pics3.baidu.com/feed/ca1349540923dd547532bf33eeefa0db9d824816.jpeg?token=dc40f47003143a0d36b5a87d3d307a35&s=2696E7264D66FF2034F6526E0200607B)
2、warp:内容超过后换行,第一行在上方
![](https://pics7.baidu.com/feed/b999a9014c086e06f23cd49d3dee68f108d1cbb8.jpeg?token=b548f19ef85a034304ede83e7ebc6d74&s=6E96E70E4D63F72012EB166B0300B078)
3、warp-reverse:换行后有两条轴线,reverse就是把轴线排列的顺序倒过来,第一行在下方。
![](https://pics7.baidu.com/feed/a8ec8a13632762d07b73df319f0a1bff533dc6de.jpeg?token=0fdb33cd846d44e39a3c09bf1334aea0&s=6E96E70E4D624F2210E73F6B03006078)
三、justify-content定义项目在主轴上的对齐方式:
.box {justify-content: flex-start | flex-end | center | space-between | space-around;}
1、flex-start:(默认值),左对齐
2、flex-end:右对齐
3、center:居中
4、space-between:两端对齐,项目之间的间隔都相等。
5、space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
![](https://pics1.baidu.com/feed/d009b3de9c82d158fb6f7119c1ec0addbe3e4297.jpeg?token=c3353a35fdaedcbbc7ff56093e918d92&s=1E027621D29E05C80CBC37F102001034)
四、align-items(交叉轴对齐方式):
1、align-items:stretch;
2、align-items:flex-start(start侧开始,上对齐)
3、align-items:flex-end(end侧开始,下对齐)
4、align-content :center (中心对齐)
5、align-items:baseline(基线对齐)
五、align-content(多根轴线对齐方式):
1、align-content :stretch (拉伸)
2、align-content :flex-start (start侧开始,上对齐)
3、align-content :flex-end(end侧开始,下对齐)
4、align-content :center (中心对齐)
5、align-content:space-between(上下没有间距,中间各子元素间距相同)
6、align-content:space-around (上下间距之和等于中间各个间距)
每个属性就不在这里一一演示了,大家可以多看看API,弄懂了每个属性的功能,flex布局应该没什么问题。