flex布局篇（一）

淡淡的烟草味﹌ 2022-07-15 18:23 316阅读 0赞

本文原创地址链接：[http://blog.csdn.net/zhou\_xiao\_cheng/article/details/52894859][http_blog.csdn.net_zhou_xiao_cheng_article_details_52894859]，未经博主允许不得转载。  
flex布局是一种十分强大的布局方式，使用它可以轻松完成绝大部分的网页布局工作，可以说，只要掌握了flex布局，你就可以在布局中游刃有余了。  
当然，学习一种布局方式，了解关于它的一些基本知识是很有必要的，这样可以方便你以后更加系统透彻地掌握它，而不是仅仅简单地使用它。  
如下图所示，蓝色部分的元素就是一个容器，设置了它的布局方式为flex（`display: flex`）后，就变成了flex容器，而该元素的所有子元素就全部自动变成了flex项目（如图中的红色部分）。flex容器默认有两根轴： 主轴与纵轴，默认的主轴为水平方向 & 从左往右，纵轴为垂直方向＆从上往下，下面所讲述的内容，均建立在flex容器默认主轴的基础上。  
![这里写图片描述][20161022154740043]  
接着，你只要记住下面这两点:

### 1. 设置在flex容器上面的属性： ###

设置主轴的方向：row(水平向右)，row-reverse(水平向左)，column(垂直向下)，column-reverse(垂直向上)。

flex-direction: row(默认值) | row-reverse | column | column-reverse

flex项目一般都沿着一条轴线排列，这个属性设置当一条轴线排不下的时候，项目怎么换行： nowrap(不换行) ，wrap (往下换行)，wrap-reverse(往上换行)。

flex-wrap: nowrap(默认值) | wrap | wrap-reverse

设置flex项目在主轴上的对齐方式： flex-start(左对齐) ，flex-end(右对齐)，center (居中对齐)， space-between(两端对齐)，space-around(flex项目两侧间隔相等)

justify-content: flex-start(默认值) | flex-end |  center | space-between | space-around

设置flex项目在纵轴上的对齐方式： flex-start(上对齐) ，flex-end(下对齐)，center (居中对齐)，baseline(以flex项目的第一行文字底部对齐)，stretch(如果flex项目高度为auto | 没有设置高度，那么占满flex容器的高度)

align-items: flex-start(默认值) | flex-end | center

flex-direction与flex-wrap的简写,按序赋值就好。

flex-flow: row nowrap(默认值) | ...

这个属性没怎么用过，设置多根轴线在纵轴上的对齐方式。

### 2. 设置在flex项目上的属性： ###

当轴线上存在多余空间时，设置flex项目的扩大比例，默认值为0，即不扩大，扩大值还可取任意正数。

flex-grow: 0(默认值) | 任意正数

当轴线上空间不足时，设置flex项目的缩小比例，默认值为1，即自动缩小，缩小值还可取0和任意正数。

flex-shrink: 1(默认值) | 0 | 任意正数

重新分配轴线上的空间之前，该flex项目所占据的空间，默认值为auto，即它本身大小。

flex-basic: auto(默认值) | 任意表示大小的值

设置单个flex项目与其它项目不同的对齐方式，会覆盖flex容器的align-items的值，默认值为auto,即flex容器的align-items属性的值是什么，这个flex项目在纵轴上的对齐方式就是什么，其它值的解释与align-items的值相同。

设置项目的排序循序，数值小的在前，大的在后。

order: 0(默认值) | 整数值

flex-grow、flex-shringk与flex-basic的简写,按序赋值就好，后面两个属性值为可选。

flex：0 1 auto(默认值) | ...

实践出真知，接下来反复地敲代码，直到把它们全部理解，并深深地印在你的脑子里为止，相信每天的一小步，终将让你有一天绽放属于自己的辉煌。

![这里写图片描述][20161022213028051]

参考资料： [http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html][http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html]

[http_blog.csdn.net_zhou_xiao_cheng_article_details_52894859]: http://blog.csdn.net/zhou_xiao_cheng/article/details/52894859
[20161022154740043]: /images/20220715/de6edfc7bfc3482f90870dfba0162a46.png
[20161022213028051]: /images/20220715/9bd2e2548b654da683a1f598b4e00d13.png
[http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html