flex布局

1.body设置

常用初始化样式

body {
margin:0 auto;
min-width:;
max-width:;
background:;
font-size:;
font-family:;
line-height:;
}

2.flex布局原理

1. 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
2. 采用flex布局的元素，称为flex容器；
   它的所有子元素自动成为容器成员，称为flex项目
3. 当为父盒子设置flex布局以后，子元素的float，clear和vertical-align属性失效

3.flex布局父项常见属性

1.flex-direction：设置主轴的方向

• flex布局中分为主轴和侧轴方向，默认为x轴向右和y轴向下方向
• flex-direction设置谁为主轴，则剩下的就是侧轴
• 子元素根据主轴来进行排列
• 属性值和说明：
  row 默认从左到右
  row-reverse 从右到左
  colunm 从上到下
  colunm-reverse 从下到上

2.justify-content：设置主轴子元素排列

• 
• 注意：是沿主轴排列！

3.flex-wrap:子元素是否换行

• 默认情况下，flex布局子元素不换行，装不下会缩小子元素的宽度
• flex-wrap：nowrap 默认不换行
• flex-wrap：wrap 换行显示

4.align-items：设置侧轴子元素排列

• 在子项为单项即单行的时候使用
• 
• 拉伸：子盒子不要给高度，和父盒子一样高

5.align-content:设置侧轴子元素排列(多行)

• 
• 在单行情况下不起作用

6.flex-flow

• flex-flow是flex-direction和flex-wrap属性的复合属性
• 中间用空格隔开

4.flex布局子项常见属性

1.flex属性

• 定义子项目分配剩余空间，用flex来表示占多少份数
• 也可以写百分号，相对父级来说

2.align-self：控制子项自己在侧轴上的排列方式

• 可允许单个项目与其他项目有不一样的的对齐方式
• 可以覆盖align-items属性
• 默认值为auto，表示继承父元素的align-items属性
• 如果没有父元素，则等同于stretch

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

• 数值越小，排列越靠前，默认为0
• 注意：和z-index不一样
• 控制的是左右排列的顺序