- 概念：弹性盒子是CSS3的一种新的布局模式。目的是提供一种更加有效的方式对一个容器中的子元素进行排列、对齐和分配空白空间。
- 构成：弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。
- 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
弹性盒子的属性
flex-direction 指定弹性子元素在父容器中的位置。
语法：
flex-direction: row | row-reverse | column | column-reverse
- row：横向从左到右排列（左对齐），默认的排列方式。
- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
- column：纵向排列。
- column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
justify-content 属性 内容对齐 弹性项沿着弹性容器的主轴线对齐
语法：
justify-content: flex-start | flex-end | center | space-between | space-around
align-items 属性 纵轴方向上的对齐方式
语法：
align-items: flex-start | flex-end | center | baseline | stretch
flex-wrap 属性 指定弹性盒子的子元素的换行方式
语法：
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;
align-content 属性 类似于align-items， 但它不是设置弹性子元素的对齐，而是设置各个行的对齐
语法：
align-content: flex-start | flex-end | center | space-between | space-around | stretch
弹性子元素的属性
- 排序
order:
- 对齐
margin-right: auto; // margin值为auto，自动获取弹性容器中剩余的空间。将剩余的空间放置在元素的右侧
- 完美居中
margin: auto //水平垂直居中
- align-self 属性 设置弹性元素自身在纵轴方向上的对齐方式
align-self: auto | flex-start | flex-end | center | baseline | stretch
- flex 属性 指弹性子元素如何分配空间
flex: auto | initial | none | inherit | [flex-grow] || [flex-shrink] || [flex-basis]
flex属性值详解：
- flex是以下3个属性的简写：flex-grow | flex-shrink | flex-basis
/* 关键字值 */
flex: auto;
flex: initial;
flex: none;
/* 一个值, 无单位数字: flex-grow */
flex: 2;
/* 一个值, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;
/* 两个值: flex-grow | flex-basis */
flex: 1 30px;
/* 两个值: flex-grow | flex-shrink */
flex: 2 2;
/* 三个值: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;
单值语法: 值必须为以下其中之一:
- 一个无单位数(number): 它会被当作flex: number 1 0; flex-shrink的值被假定为1，然后flex-basis 的值被假定为0。
- 一个有效的宽度(width)值: 它会被当作 flex-basis的值。
- 关键字none，auto或initial.
双值语法: 第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值。第二个值必须为以下之一：
- 一个无单位数：它会被当作 flex-shrink 的值。
- 一个有效的宽度值: 它会被当作 flex-basis 的值。
三值语法:
- 第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值。
- 第二个值必须为一个无单位数，并且它会被当作 flex-shrink 的值。
- 第三个值必须为一个有效的宽度值， 并且它会被当作 flex-basis 的值。
重点
-
块级元素垂直居中问题，用flex解决；
-
行内元素垂直居中解决方案如下：
- 单行: 该元素的css属性 line-height的值与该元素的父级元素的css属性height一致即可。
- 多行：设置该元素css属性：display：table-cell；vertical-align：middle；还需要设置父级元素css属性：display：table；
