flexbox(上)

flexbox是什么

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

抛开浏览器兼容性，对于移动端h5开发，简直是布局的神兵利器

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

属性列表

关于flex布局，有12个属性， 其中6个设置在容器上，6个设置在项目上。

设置在容器上的属性

1. justify-content – 将flex元素和主轴对齐
2. flex-direction – 定义主轴方向
3. flex-wrap – flex元素必须单行或者自动换行
4. flex-flow – flex-direction和flex-wrap的缩写
5. align-items – 将flex元素在交叉轴上对齐
6. align-content – 当交叉轴有多余空间时，对齐容器内的轴线

设置在项目上的属性

1. order – 决定flex元素的顺序
2. align-self – 自身对齐交叉轴，覆盖父元素设置的align-items
3. flex-grow –定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
4. flex-shrink –定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
5. flex-basis –在分配多余空间之前，项目占据的主轴空间
6. flex –flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

属性值

12个属性中，除去一些融合缩写属性，属性值可谓五花八门，而且组合使用的话，还有很多注意点，建议大家可以玩下这个flexbox小青蛙的游戏，游戏几乎包含了所有的常用属性和属性值，形象且容易记忆。

容器上主轴方向相关属性

属性比较多，我们使用设置容器和项目上、主轴和交叉轴四种来分类相关属性，好记不容易搞混

一 容器-主轴： justify-content

将flex元素和主轴对齐

共有以下5个属性
- flex-start: 元素和容器的左端对齐。
- flex-end: 元素和容器的右端对齐。
- center: 元素在容器里居中。
- space-between:元素之间保持相等的距离。
- space-around:元素周围保持相等的距离。
前三个属性意思简单明了，下面介绍后面的两个属性：

space-between

between这个单词强调“之间”，也就是说元素之间的空间保持相等。如下图青蛙之间的距离保持相等，注意两边的青蛙仍紧挨容器

space-around

around这个单词强调“周围”, 也就是说元素周围的空间保持相等。如下图青蛙周围的距离保持一致，注意B区域的宽度是A区域的两倍， 换句话说元素之间的距离会“叠加”而不是“重叠”

二 容器-主轴：flex-direction

定义元素在主轴上的摆放方向

-row: 元素摆放的方向和文字方向一致。
-row-reverse: 元素摆放的方向和文字方向相反。
-column: 元素从上放到下。
-column-reverse: 元素从下放到上。

这个属性和属性值组合实属意料之中，横向正反和竖向正反，没什么好特别介绍的

三 容器-主轴：flex-wrap

元素必须单行或者换行

• nowrap: 所有的元素都在一行。
• wrap: 元素自动换成多行。
• wrap-reverse: 元素自动换成逆序的多行

对于wrap是不是非常眼熟？white-space:nowrap word-wrap:break-word这些css属性经常被用来强制语句或者单词是否换行，所以这里的wrap也一样。根据字面意思即可判定，不作过多解释。

四 容器-主轴： flex-flow

flex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。
flex-flow: 《flex-direction》《flex-wrap》

五 容器-交叉轴：align-items

纵向对齐元素。

• flex-start: 元素与容器的顶部对齐。
• flex-end: 元素与容器的底部对齐。
• center: 元素纵向居中。
• baseline: 元素在容器的基线位置显示。
• stretch: 元素被拉伸以填满整个容器。

与justify-content:center并列flex中最常用的属性，终于有了简单易用的垂直居中属性了（T-T）！

前三个属性值简单明了，主要介绍剩下的两个属性值，baseline和stretch。一图概括：

至于什么是baseline?

具体可以参考张鑫旭的博客

六 容器-交叉轴：align-content

对齐容器内的轴线(行)。

• flex-start: 多行都集中在顶部。
• flex-end: 多行都集中在底部。
• center: 多行居中。
• space-between: 行与行之间保持相等距离。
• space-around: 每行的周围保持相等距离。
• stretch: 每一行都被拉伸以填满容器。

乍一看长的和align-items差不多，连属性值都有几分相似，所以我们得区分一下两者到底有什么区别：

align-items 用于容器内部每一个单行元素在主轴上垂直方向的对齐方式

align-content 重点就是多行 只适用于多行的flex容器，并且当侧轴上有多余空间使flex容器内的flex线对齐。

两者也可以配合使用，深挖实在篇幅太多，我想另起一篇博客来深入描述两者的区别和联系。

结尾

flex布局涉及到的属性和属性值实在太多，单文逐一描述篇幅太长不易阅读且查找麻烦，所以，本文只描述设置在容器上的属性和属性值，下一篇会介绍设置在容器中的项目上的属性属性值。