html 布局 flex,CSS的flex布局，看完这篇你就懂了

每一个项目都离不开前端的网页布局，网页布局也是CSS一个重点应用，系统来说，页面的布局都应该由前端来完成，不过作为后端人员，一些简单的样式就不需要依赖前端人员了。

传统的布局，都是基于盒子模型，依赖float、position定位，它对于一些特殊的布局非常不方便，比如，垂直居中。相信很多小伙伴对于垂直居中有些困扰吧。今天我们就来了解一下flex布局。

flex是Flexible Box的缩写，意为“弹性布局”，flex布局是w3c在2019年提出一种新的布局方案，它可以简便、完整、响应式的实现各种页面布局。现在所有的浏览器都支持flex。

采用flex布局的元素，称为flex容器(flex container)，简称“容器”。它的所有子元素自动成为容器成员，简称为“项目”。

容器默认存在两个轴：水平的主轴和垂直的交叉轴。主轴的开始位置叫做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。

flex-direction

二、flex-wrap(一条轴线排不下如何换行)：

.box{flex-wrap: nowrap | wrap | wrap-reverse;}

1、Nowarp：不换行，在一行显示

Nowarp

2、warp：内容超过后换行，第一行在上方

warp

3、warp-reverse：换行后有两条轴线，reverse就是把轴线排列的顺序倒过来，第一行在下方。

warp-reverse

三、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：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

四、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布局应该没什么问题。

举报/反馈