css布局

一.flex布局

flex布局即为弹性布局，使用display:flex进行布局，此布局使得盒模型布局更易使用。值得注意的是设为flex布局后，子元素的float、clear和vertical-align属性将失效

当元素使用flex后，该元素则成为flex容器(container)，其容器属性有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。该容器中的元素则成为flex项目(item)，其项目属性有：order、flex-grow、flex-shrink、flex-basis、flex、align-self(此6属性父元素必须为flex容器，否则失效)

1.  flex-direction属性 决定主轴的方向，即项目的排列方向

它可能有4个值
row:默认值，主轴为水平方向，起点在左端
row-reverse:主轴为水平方向，起点在有段
column:主轴为垂直方向，起点在上方
column-reverse:主轴为垂直方向，起点在下方

  2.flex-wrap ：定义子元素超过一行，如何换行，分别有三个属性：

• nowrap（默认值）：默认不换行。   
• wrap：换行，第二行在第一行下面，从左到右
• wrap-reverse：换行，第二行在第一行上面，从左到右；

3. flex-flow:是flex-direction 和flex-wrap的简写形式，默认是 row  nowrap

    flex-flow：flex-direction|flex-wrap ；

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

flex-start（默认值）：开头对齐（左对齐）

flex-end：结尾对齐（右对齐）

center： 居中

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

space-around：每个项目两侧的间隔相等。

• 

 5.align-items：属性定义项目在交叉轴如何对齐

flex-start：交叉轴的起点对齐（左对齐）
flex-end：交叉轴的终点对齐（右对齐）
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐
stretch：默认值，如果项目未设置高度或者auto，将占满整个容器的高度

 

 补充：order  子元素排列的位置默认是按照html先后顺序来排列的，html结构谁在前面默认就排列在前面；order的作用就是改变子元素排列顺序

     order：默认（0） 值越小越靠前