丸子学CSS（学习一个半小时 - flex弹性布局）

前言

flex 布局是前端重要且常用的一种布局方式，提供的属性并不多，但是概念很重要，需要多加练习才能熟练运用

基本概念

1. 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。
2. 容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。
3. 主轴的开始位置叫做 main start，结束位置叫做 main end。
4. 交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。
5. 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size

如下图所示

通过将元素的 display 属性设置为 flex（生成块级 flex 容器）或 inline-flex（生成类似 inline-block 的行内块级 flex 容器）。当一个元素设置了 Flex 布局以后，其子元素的 float、clear 和 vertical-align 等属性将失效

根据作用范围的不同，flex属性分为以下两大类:
容器属性：

flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

项目属性：

order、align-self、flex、flex-grow、flex-shrink、flex-basis

容器属性

flex-direction

flex-direction 属性用来决定主轴的方向（即项目的排列方向），属性的可选值如下：

flex-wrap

flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行，属性的可选值如下：

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 两个属性的简写，语法格式如下：

flex-flow: flex-direction flex-wrap;

jusitify-content

justify-content 属性用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式，属性的可选值如下：

align-items

align-items 属性用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式，属性的可选值如下：

align-content

align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式，单行无效，作用于多行，属性的可选值如下：

项目属性

order

order 属性用来设置项目在容器中出现的顺序，您可以通过具体的数值来定义项目在容器中的位置，属性的语法格式如下：

align-self

align-self 属性允许您为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值。align-self 属性的可选值如下：

flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，语法格式如下：

flex: flex-grow flex-shrink flex-basis;

参数说明如下：
● flex-grow：（必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0；
● flex-shrink：（选填参数）一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1；
● flex-basis：（选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值） 或者以具体的值加 "%"、"px"、"em" 等单位的形式。
另外，flex 属性还有两个快捷值，分别为 auto（1 1 auto）和 none（0 0 auto）。

除了可以使用 flex 属性外，您也可以使用 flex-grow、flex-shrink、flex-basis 几个属性来分别设置项目的增长量、收缩量以及项目长度