flex布局

flex布局

定义：弹性布局。

 

基本概念：

容器：使用了displye:flex的元素。

项目： 容器里的子元素。

主轴：默认水平的。

交叉轴：默认垂直的。

 

容器属性：

容器属性：flex-direction（主轴方式）、flex-wrap（换行方式）、flex-flow（方向和换行的缩写）、justify-content（对齐方式）、align-items（交叉轴上对齐方式）、align-content（多条轴对齐方式）

 

一、flex-direction：主轴的方向。

取值

1、row:是默认值，主轴水平，项目从左到右。

2、row-reverse:主轴水平，项目从右到左。

3、column：主轴变为垂直，项目从上到下。

4、column-reverse:主轴变为垂直，项目从下到上。

 

二、flex-wrap：规定项目放不下时，项目怎么换行，即换行方式。

取值：

1、nowrap：默认值，不换行。容器的宽度装不下项目时，项目也会调整放到容器的一行里。

2、wrap：换行，先放置的在前面。

3、wrap-reverse：换行，后放置的在前面。

 

三、flex-flow：是flex-direction和flex-wrap的缩写。

使用格式：flex-flow：row nowrap。

 

四、justify-content：

定义：项目在主轴上的对齐方式。

取值：（假设主轴方向水平，从左到右）

1、flex-start：默认值，左对齐。


2、flex-end：右对齐。

3、center：居中。

4、space-between：空间留在中间，意思是两边对齐，项目间隔分配一样。

5、space-around：项目每侧距离相等。

6、space-evenly：除项目剩余的距离平均分配。

 

五、align-items

定义：交叉轴的对齐方式。

取值：（默认交叉轴垂直从上到下）

1、stretch: 默认值，如果项目没有设置高度，或高度为auto，项目高会占满整个容器。

2、flex-start：上对齐。

3、flex-end：下对齐。

4、center：居中。

5、baseline：项目第一行文字基线对齐。

 

六、align-content

定义：多条轴的对齐方式。

取值：

stretch：默认值，轴线占满整个交叉轴。

flex-start：多轴项目上对齐。

flex-end：多轴项目下对齐。

center：多轴项目中间对齐。

space-between：上下两端对齐，中间平均分配。

space-around：每轴线平均分配。

 

项目属性：

项目属性：order（排列顺序）、flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（固定项目在主轴上的空间）、flex（flex-grow和flex-shrink和flex-basis的缩写）、align-self（自定义某个项目的交叉轴对齐方式）

取值：

1、order：默认取0，值小排在前。

2、flex-grow：默认取0，有剩余空间也不放大，是项目的放大比例。

eg:

 div:nth-of-type(1) {flex-grow: 1;}

div:nth-of-type(2) {flex-grow: 3;}

div:nth-of-type(3) {flex-grow: 1;}

说明：第二个项目是其他项目的三倍。

3、flex-shrink：默认取1，是空间不足项目缩小，所有项目取1，项目会等比例缩小；有的取1，有的取0，取0的项目不缩小，其他缩小。

4、flex-basis：项目进行缩放之前，取的固定空间。

5、flex：是flex-grow（放大比例）和flex-shrink（缩小比例）和flex-basis（初始值）的缩写，后两个可选。优先推荐使用。

常见使用

（1）flex: 1; 不管项目的内容，设置后，项目的宽度一样。

（2）flex: auto 0 0; 缩放自动调节，项目保持股固有值。

（3）flex: auto 1 1；宽度自动调节，项目大小一样。和flex:效果一样。

（4）flex: 100% 1 1;宽度自动调节，项目大小一样。

6、align-self：自定义某个项目的交叉轴上的上下对齐。

 

注意：使用了flex后，float、clear、vertical-align将失效。

 

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