CSS布局之弹性盒子-flexbox(上)

弹性盒子是一种新技术，但在如今各个浏览器都广泛支持的情况下，它已经开始准备广泛应用了。 弹性盒子提供了工具，允许快速创建曾经被证明用CSS很难实现的一些复杂，灵活的布局和功能。

一、 为什么是弹性盒子?

长久以来，唯一可用的且有稳定的跨浏览器兼容性的能用来构建 CSS 布局的工具只有 floats 和positioning。它们是既可行，表现也不错的布局方案，但是在某些布局方面它们就有限制，并且难以实现。

以下简单的布局要求是难以或不可能用这样的工具（ floats 和positioning）方便且灵活的实现的：

• 在父内容里面垂直居中一个块内容。
• 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
• 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

二、flex容器和flex项目

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

三、flex 模型说明

当元素表现为 flex 框时，它们沿着两个轴来布局：

flex_model.png

• 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。主轴的开始和结束被称为main start 和main end。
• 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。交叉轴的开始和结束被称为 cross start 和 cross end。
• 设置了 display: flex 的父元素表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）。一般通过是否包含一个标题被称之为 flex 容器（flex container）。
• 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）元素。

主轴和侧轴.png

• 项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

四、flexbox属性

关于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小青蛙的游戏，游戏几乎包含了所有的常用属性和属性值，形象且容易记忆。flexbox小青蛙游戏答案

五、容器上主轴方向相关属性

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

设置在容器上的属性

1. justify-content – 将flex元素和主轴对齐，即水平对齐元素。

语法:

justify-content: flex-start|flex-end|center|space-between|space-around

属性值:

flex-start: 元素向主轴起点对齐。
即从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。
flex-end: 元素向主轴终点对齐。
即从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。
center: 元素在主轴居中。
space-between:元素之间保持相等的距离。
即在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
space-around:元素周围保持相等的距离。
即在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

*注意：前三个属性很好理解，下面我重点通过代码加图示说明space-between和space-around的区别。

*{
    margin: 0;
    padding: 0;
}
.test {
    width: 600px;
    border: 1px solid #000;
    margin: 10px;

    display: flex;
    justify-content: space-between;
}
div p{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: orange;
}

    
1
    
2
    
3

space-between.png

*{
    margin: 0;
    padding: 0;
}
.test {
    width: 600px;
    border: 1px solid #000;
    margin: 10px;

    display: flex;
    justify-content: space-around;
}
div p{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: orange;
}

    
1
    
2
    
3

space-around.png

2. align-items – 将flex元素在交叉轴上对齐，即纵向对齐元素。

语法：

align-items: stretch|center|flex-start|flex-end|baseline

属性值:

flex-start: 元素向侧轴起点对齐。
flex-end: 元素向侧轴终点对齐。
center: 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
baseline: 元素在容器的基线位置显示。
stretch: 元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

3. flex-direction – 定义主轴方向，即元素在容器里摆放的方向。

语法：

flex-direction: row|row-reverse|column|column-reverse

属性值:

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

注意：
默认，flex以行为方向，justify-content控制横向对齐，align-items控制纵向对齐。
当flex以列为方向时，justify-content控制纵向对齐，align-items控制横向对齐。

注意：当你调转行或列的方向后，flex-start和flex-end对应的方向也被调转了。

4. flex-wrap – flex元素必须单行或者自动换行成多行。

语法：

flex-wrap: nowrap|wrap|wrap-reverse

属性值:

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

5. align-content – 当交叉轴有多余空间时，对齐容器内的轴线。即使用align-content来决定行与行之间隔多远。

语法：

align-content: stretch|center|flex-start|flex-end|space-between|space-around

属性值:

flex-start: 多行都集中在顶部。
即所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
flex-end: 多行都集中在底部。即所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
center: 多行居中。
即所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。
space-between: 行与行之间保持相等距离。
space-around: 每行的周围保持相等距离。
stretch: 每一行都被拉伸以填满容器。

这可能有些容易混淆，align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置。只有一行的时候align-content没有任何效果。

6. flex-flow – flex-direction和flex-wrap的缩写

语法:

flex-flow: flex-direction flex-wrap

flex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。
你可以用flex-flow: row wrap去设置行并自动换行。

好，容器上的属性先介绍到这，下节介绍项目上的属性。弹性盒子-flexbox(下)