flex布局

标签：

网页布局，是css的一个重要应用。

传统的网页布局，主要是基于盒模型，和display、position、float属性，这些属性的一个优势就是简单，容易理解，但也有一些不方便的地方，比如在实现垂直居中的时候。

2009年，W3C提出了一种新的解决方案：Flex（Flexible Box，弹性布局）布局。

设置为flex布局的容器称为flex容器，flex容器的子元素称为容器项目（flex item）。

Flex布局的一些基本概念

Flex容器默认有两根轴，水平的主轴（main axis）和垂直的交叉轴（cross asix）。主轴的开始位置叫做main start，主轴的结束位置叫做main end。交叉轴的开始位置叫做cross axis，交叉轴的结束位置叫做cross end。

容器项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

Flex容器的一些属性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

1.flex-direction：容器的方向

有4个值：

row（默认值）：主轴为水平方向，起点在左侧

row-reverse：主轴为水平方向，起点在右侧

column：主轴为垂直方向，起点在顶部

column-reverse：主轴为垂直方向，起点在底部

2.flex-wrap：项目排列

有3个值：

nowrap(默认)：不换行

wrap：换行，第一行结束后，另起一行开始排列

wrap-reverse：换行，第一行结束后在上面一行开始排列

3.flex-flow：flex-direction和flex-wrap的简写形式，默认值为row nowrap

.ele{flex-flow:<flex-direction>||<flex-wrap>}

取值请看例子：

.container{

　　flex-flow:row nowrap;

}

4.justify-content:项目在主轴上的对齐方式

有5个值：

flex-start(默认)：左对齐

flex-end:右对齐

center：居中

space-between：两端对齐，项目之间的间隔相等

space-around：每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍

5.align-items：项目在交叉轴上的对齐方式

有5个值，与交叉轴的方向有关，具体如下：

flex-start：交叉轴的起点对齐

flex-end：交叉轴的终点对齐

center：交叉轴的中点对齐

baseline：项目的第一行文字的基线对齐

stretch(默认值)：如果项目未定义或height为auto，将占满整个容器的高度

6.aglin-content：多根轴线的对齐方式，如果只有一根轴线，该属性不起作用

有6个值：

flex-start：与交叉轴的起点对齐

flex-end：与交叉轴的终点对齐

center：与交叉轴的中点对齐

space-between：与交叉轴的两端对齐，轴线之间的间隔平均分布

space-around：每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框之间的间隔大一倍

stretch（默认值）：轴线占满整个交叉轴

flex布局

标签：

原文地址：http://www.cnblogs.com/yansj1997/p/5482811.html