CSS之flex布局

常用的布局方式有3种:

display

:css内联和块级布局。

position

:绝对、相对定位布局。

float

:浮动布局。

传统的布局方式存在一个很明显的问题，那就是垂直居中不易实现。

flex

:弹性盒子布局，可以更好的实现响应式布局。

Flex的使用

Flex容器

任何容器都可以

flex

布局。

Flex容器

的所有子元素也自动成为容器的成员，成为

Flex项目

。

Flex容器

默认存在2根轴线（水平主轴和垂直交叉轴）,布局就是根据这2根轴来排列项目显示的。

块级元素：

display:flex;

内联元素：

display:inlne-flex;

使用了flex布局后，项目的float、clear、vertical-align都将失去效果。

Flex容器属性

1.flex-direction设置项目的排列方向。

flex-direction: row | row-reverse | column | column-reverse;

1

row

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

从左往右排。如果超出容器宽度，容器会根据项目的宽度进行等比缩放

row-reverse

：主轴为水平方向，起点在右端。

从右往左排，如果超出容器宽度，容器会根据项目的宽度进行等比缩放

column

：主轴为垂直方向，起点在上沿。

从上往下排。

column-reverse

：主轴为垂直方向，起点在下沿。

从下往上排。

2.flex-wrap设置项目是否换行排列。

flex-wrap: nowrap | wrap | wrap-reverse;

1

nowrap

（默认值）：不换行。

wrap

：换行，第一行在上方。

wrap-reverse

：换行，第一行在下方。

3.flex-flow

flex-flow

属性是

flex-direction

属性和

flex-wrap

属性的简写形式，默认值为

row
nowrap

flex-flow: <flex-direction> || <flex-wrap>;

4.justify-content

设置项目的水平对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

1

flex-start

（默认值）：左对齐

flex-end

：右对齐

center

： 居中

space-between

：两端对齐，项目之间的间隔都相等。

space-around

：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5.align-items

设置项目垂直方向对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch;

1

flex-start

：交叉轴的起点对齐。

flex-end

：交叉轴的终点对齐。

center

：交叉轴的中点对齐。

baseline

: 项目的第一行文字的基线对齐。

stretch

（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6.align-content

当项目定义了横竖2根轴的时候生效，相当于

justify-content

和

align-items

的简写。

Flex项目属性

a.order

定义项目的排列顺序，值越小越考前，默认为0。

order: <integer>;

b.flex-grow

定义项目的放大比例，默认为0（不放大）。

flex-grow: <number>;

c.flex-shrink

定义项目的缩小比例，默认为1，如果空间不足湘江将自动缩小。

flex-shrink: <number>;

d.flex-basis

定义项目主轴空间，相当于设置width，默认为auto。

flex-basis: <length> | auto;

e.flex

flex

属性是

flex-grow

, 

flex-shrink

 和 

flex-basis

的简写，默认值为

0
1 auto

。后两个属性可选。

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

f.align-self

定义项目的对齐方式。可覆盖

align-items

。默认值：auto。

align-self: auto | flex-start | flex-end | center | baseline | stretch;