弹性盒模型

1含义

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

弹性布局可以使子元素按照规定的规则进行空白空间的分配、对齐和排列;

弹性布局包括两个部分:弹性盒与弹性项(弹性子元素)

采用Flex布局的元素，称为弹性容器(flex container)，简称"弹性盒"。

它的所有子元素自动成为容器成员，称为弹性项目(flex item)，简称"弹性项"

将一个盒子设置成为弹性盒:

display: flex;或display: inline -flex;

2.容器的轴

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)

主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;

交叉轴的开始位置叫做cross start，结束位置叫做cross end。

3.容器属性

flex-direction决定主轴的方向

row (默认值) :主轴为水平方向，起点在左端

row-reverse:主轴为水平方向，起点在右端

column:主轴为垂直方向，起点在上沿

column-reverse:主轴为垂直方向，起点在下沿

flex-wrap是否换行

nowrap (默认) :不换行

wrap:换行，第一行在上方         wrap-reverse :换行，第一行在下方

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

            /* 垂直开始,自动换行 */

            flex-direction: column;

            flex-wrap: wrap;

           /* 从左的反方向开始,从下往上换行 */

            flex-direction: row-reverse;

            flex-wrap: wrap-reverse;

      /* 复合元素 */

            flex-flow: column wrap-reverse;

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

flex-start (默认值) :  左对齐

flex- end:          右对齐          center:            居中

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

space-around:（不塌陷）

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

space- evenly:      均匀排列每个元素，每个元素之间的间隔相等

不设置父盒子宽度自动调节页面宽度

 

align-items 项目在交叉轴上如何对齐

flex-start:           交叉轴的起点对

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

center:             交叉轴的中点对齐

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

stretch (默认值) :    如果项目未设置高度或设为auto,将占满整个容器的高度

stretch可以更加方便快捷的设置圣杯布局