这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

超Q的弹性盒子——flex✨

还记得小时候的QQ糖吗，超Q的口感。
而在布局中所使用的弹性盒子也会让你在开发中QQ弹弹
Come on baby

为什么说它超弹呢？

1. 与传统布局对比：
   • 传统布局：基于盒状模型，依赖 display，position，float属性，并且它对于那些特殊布局非常不方便，比如，无法直接实现垂直居中
   • flex布局：它是一种一维的布局模型，它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力，所以它能很简单地实现一些特殊布局。
2. 它的特性与概念：
   • 任何一个容器（div）都可以使用flex布局
   • 采用flex布局的元素被成为flex容器，所有子元素都会成为它的成员。
   • 采用flex的元素其float，clear都会失效
   • 一维的特性使其拥有两根轴，水平的主轴与垂直的交叉轴（默认主轴排列）

Q弹的配料之flex属性

在flex容器中加入六种配料即六种属性，让布局更简单！

1. flex-direction属性
   flex-direction属性决定主轴的方向

属性值	作用
row	主轴为水平方向，起点在左端
row-reverse	主轴为水平方向，起点在右端
colmun	主轴为垂直方向，起点在上端
colmun-reverse	主轴为垂直方向，起点在下端

.flex-box {
  flex-direction: row ;
  flex-direction: row-reverse ;
  flex-direction: column ;
  flex-direction: column-reverse ;
}

2. flex-wrap属性
flex属性定义在一条轴线上子成员发生拥挤，如何换行排列。

属性值	作用
nowrap	不换行（将子成员宽度缩小）
wrap	换行且第一行在上方
wrap-reverse	换行且第一行在下方

.flex-box {
  flex-wrap: nowrap ;
  flex-wrap: wrap ;
  flex-wrap: wrap-reverse;
}

3. justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。

属性值	作用
flex-start	左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，且间隔相等
space-around	每个子成员间隔相等

.flex-box {
  justify-content: flex-start ;
  justify-content: flex-end ;
  justify-content: center ; 
  justify-content: space-between ;
  justify-content: space-around ;
}

4. align-items属性
align-items属性定义项目在交叉轴上如何对齐。

属性值	作用
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
baseline	项目的第一行文字的基线对齐
stretch	如果项目未设置高度或设为auto，将占满整个容器的高度

.flex-box {
  align-items: flex-start ;
  align-items: flex-end ;
  align-items: center ;
  align-items: baseline ;
  align-items: stretch ;
}

5. align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

属性值	作用
flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
baseline	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch	轴线占满整个交叉轴

.flex-box {
  justify-content: flex-start ;
  justify-content: flex-end ;
  justify-content: center ; 
  justify-content: space-between ;
  justify-content: space-around ;
  justify-content: stretch;
}