超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属性决定主轴的方向

.flex-box {
  flex-direction: row ;
  flex-direction: row-reverse ;
  flex-direction: column ;
  flex-direction: column-reverse ;
}
复制代码

2. flex-wrap属性

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

.flex-box {
  flex-wrap: nowrap ;
  flex-wrap: wrap ;
  flex-wrap: wrap-reverse;
}
复制代码

3. justify-content属性

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

.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-box {
  align-items: flex-start ;
  align-items: flex-end ;
  align-items: center ;
  align-items: baseline ;
  align-items: stretch ;
}
复制代码

5.  align-content属性

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

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