flexbox 弹性盒子

flexbox 弹性盒子

1.基本知识

container(容器)属性

flex-direction:

　　　　row | row-reverse | column | column-reverse

　　　　属性决定主轴的方向

 justify-content:

　　　　flex-start | flex-end | center | space-between | space-around | space-evenly

　　　　属性定义了项目在主轴上的对齐方式

 align-items:

　　　　flex-start | flex-end | center | baseline | stretch

　　　　属性定义项目在交叉轴上对齐方式

flex-wrap:

　　　　nowrap | wrap | wrap-reverse

　　　　属性定义如何换行

 flex-flow

　　　　'flex-directionz'|| 'flex-wrap', column-reverse wrap;

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

 align-content

　　　　flex-start | flex-end | center | space-between | space-around | space-evenly | stretch

　　　　属性定义了容器在交叉轴(侧轴)上的对齐方式，该属性对单行弹性盒子模型无效。

　　与align-items区别，align-items 行中元素的对齐方式，align-content是多行的时候行本身的对齐方式。如下图：

                              

元素属性

order 属性定义项目的排列顺序。

flex-grow属性定义项目的放大比例，默认是0，不放大。

flex-shrink属性定义了项目的缩小比例，默认是1，空间不足会缩小比例。

flex-basis属性定义了项目默认占据的主轴空间。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写；none 表示（0，0，auto）；auto表示(1,1,auto)

align-self定义单个项目在交叉轴上的对齐方式，可覆盖align-items属性

注意：

flex-shrink not work
容器的属性flex-wrap:wrap 会影响 flex-shrink
元素flex-basis 设置 默认宽度。

2.例子

有一个很经典的例子就是