弹性盒子布局

一、弹性盒子相关属性

 Flex容器：采用 Flex 布局的元素的父元素；

Flex项目：采用 Flex 布局的元素的父元素的子元素；

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

Flex容器属性(添加在最近的父级元素上的)

1、display:flex、inline-flex 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

举例

父元素未设置 Flex容器属性

 父级元素.big设置Flex容器属性后

 

 

 

 

2、flex-direction属性 决定主轴的方向（即项目的排列方向）  flex-direction: row（默认值） | row-reverse (横着反向)| column | column-reverse;

举例

父级元素.big添加flex-direction属性flex-direction: row-reverse

父级元素.big添加flex-direction属性flex-direction: column

 父级元素.big添加flex-direction属性flex-direction: column-reverse;

 

 

3、flex-wrap属性，定义子元素是否换行显示  flex-wrap: nowrap（默认值） | wrap | wrap-reverse;

父级元素.big添加 flex-wrap：wrap；

父级元素.big添加 flex-wrap：wrap-reverse;

 

 

4、 flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap; 5、 justify-content属性 定义了项目在主轴（）上的对齐方式。 justify-content: flex-start | flex-end | center | space-between | space-around|space-evenly（把剩余的空间进行均分。）

父级元素.big 的justify-content属性在主轴定义为横向row时 的对齐方式justify-content: flex-start

 

 父级元素.big 的justify-content属性在主轴定义为横向row时 的对齐方式 justify-content:flex-end； 

 父级元素.big 的justify-content属性在主轴定义为横向row时 的对齐方式justify-content: center； 

 父级元素.big 的justify-content属性在主轴定义为横向row时 的对齐方式justify-content: space-between；

  父级元素.big 的justify-content属性在主轴定义为横向row时 的对齐方式justify-content: space-around；

 父级元素.big 的justify-content属性在主轴定义为横向row时 的对齐方式justify-content: space-evenly；

 

6、align-items属性定义项目在侧轴上如何对齐。 align-items: flex-start | flex-end | center | baseline | stretch（默认值,拉伸）;

父级元素.big 的justify-content属性在主轴定义为横向row时 侧轴的对齐方式justify-content: space-evenly；

7、align-content属性定义了项目在侧轴上的对齐方式。（必须搭配flex-wrap才可）  align-content: flex-start | flex-end | center | space-between | space-around| space-evenly| stretch（默认值）; align-content在侧轴上执行样式的时候，会把默认的间距给合并。