flex布局

flex布局后，不分行块，都可以设置大小（给父盒子添加，让子盒子有大小，可以一行显示，也不用清除浮动）

布局原理（弹性布局）

用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局

• 当我们将父盒子设为flex布局后，子元素的float\clear \vertical-align属性都将失效
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
  

通过给父盒子添加flex属性，来控制子合资的位置和排列方式

flex布局父项常见属性

• 主轴和侧轴

  主轴和侧轴，同样的叫法有行和列、x轴y轴

  默认方向
  

flex-derction：决定主轴的方向

子元素跟着主轴排列

• 

justify-content设置主轴上的子元素排列方式

注意：使用这个属性之前一定要确定好主轴是哪个

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

• 

• 可实现盒子垂直居中
  flex-direction: column
  
  justify-content: center
  
  

flex-wrap 设置子元素是否换行(默认不换行)

• flex会让元素一行显示，放不下时，会让子盒子缩小到能够放下为止

• nowrap: 不换行

• wrap : 换行

• .box{
    flex-wrap: nowrap | wrap | wrap-reverse;
  }  //还有reverse
  

align-items 设置侧轴上的子元素排列方式（适用于单行）

stretch : 不设高度

• 实现垂直水平居中
  justify-content: center;
   align-items: center;
  
  

align-content 设置侧轴上的子元素的排列方式（适用于多行）

arround | between 适用于有宽度的父亲，如果父亲不能/没有设置明确的宽度，可以使用padding值，给margin也可以，但是在移动端电机的范围越大越好，所以最好使用padding

• 

只能用于子项出现换行的情况（多行），在单行下是没有效果的

看是否出现换行情况

如下图所示，虽然有三行，但是没有出现换行情况，所以用 align-items;

flex-flow

是 flex-direction 和 flex-wrap 属性的复合属性

flex-direction:column;
flex-wrap:wrap;

还可以写成
flex-flow:column wrap

flex布局子项常见属性

• 定义子项目分配剩余空间，用flex来表示占多少份数

flex:number 默认是0

• align-self

  align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

• order属性定义子项的排列顺序（前后顺序）

  数值越小，排列越靠前，默认为0

  注意 ： 和z-index不一样

subnav-entry {
    display: flex;
    flex-wrap: wrap;
    margin: 0 4px;
    background-color: #fff;
    border-radius: 8px;

    padding: 5px 0;
}

flex:值要想使用，直接父元素必须有display:flex;
li {
    flex: 20%;
}

.subnav-entry a {
    /* flex: 1; */
    flex: 20%;
    height: 53px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

1; */
flex: 20%;
height: 53px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}