# 5分钟带你回顾flex布局, 简单明了

flex布局, 也称弹性布局, 是手机端最常用的布局

在父元素添加display: flex 属性即可开启 flex 布局, 以下为初始代码和效果

      div {
        display: flex;
        width: 100%;
        height: 200px;
        background-color: pink;
      }
      span {
        width: 50px;
        height: 50px;
        background-color: skyblue;
      }    
    <div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
    </div>

容器(父元素)常见属性:

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

• flex-direction: row // 默认是主轴, 也就是 x 轴
  
• flex-direction: column // 是侧轴, 也就是 y 轴
  

2. justify-content 是主轴上的对齐方式, 常用的值及效果如下:

• justify-content: center // 居中
  

• justify-content: space-around // 中间间距是两边的两倍
  

• justify-content: space-between // 两边贴紧, 中间间距相等
  

• justify-content: space-evenly // 间距相等
  

3. flex-wrap 默认子元素不换行, 为了不改变子元素的宽度, 需要手动换行

• 默认状态 // 换行前
  

• flex-wrap: wrap // 换行后
  

4. align-items 设置侧轴上单行子元素的排列方式—(单行)

• align-items: center
  

5. align-content 设置侧轴上多行子元素的排列方式—(多行)

• 默认状态
  
• align-content: space-start
  
• align-content: center
  
• align-content: space-around
  
• align-content: space-between
  

项目(子元素)常见属性

1. flex 表示子元素在剩余空间中占几份;

• flex: 1 // 在不给子元素宽度下, 使子元素各占一份
  

2. align-self 是某一个子元素在侧轴单独进行排列方式;

• align-self: center // 值与其它对齐方式类似
  

3. order 是某一个子元素单独进行排列顺序;

• order: -1 // 数值默认为0, 越比0小, 排列越前
  

总结:

多练才能熟悉