CSS Flex布局学习笔记
概述
Flex 是 Flexible Box 的缩写，意为弹性盒模型。
任何一个容器都能够采纳 Flex 布局。
.box { display: flex;}行内元素也能够应用 Flex 布局。
.box { display: inline-flex;}留神：容器设为 Flex 布局后，子元素的float、clear和vertical-align属性将生效。
基本概念
采纳 Flex 布局的元素称为 Flex 容器（Flex Container），简称容器，其所有子元素称为 Flex 我的项目（Flex Item），简称我的项目。
容器默认存在两根轴：程度的主轴（main axis）和垂直的穿插轴（cross axis）。主轴的开始地位（与边框的交叉点）称为main start，完结地位称为main end；穿插轴的开始地位称为cross start，完结地位称为cross end。我的项目默认沿主轴排列。单个我的项目占据的主轴空间称为main size，占据的穿插轴空间称为cross size。
容器的属性
flex-direction属性
flex-direction属性用于指定主轴的方向（即我的项目的排列方向）。
.box { /* row：主轴为程度方向，终点在左端（默认） */ /* row-reverse：主轴为程度方向，终点在右端 */ /* column：主轴为垂直方向，终点为上沿 */ /* column-reverse：主轴为垂直方向，终点为下沿 */ flex-direction: row | row-reverse | column | column-reverse;}flex-wrap属性
默认状况下，我的项目排列在一条轴线上。flex-wrap属性用于指定当一条轴线无奈包容所有我的项目时如何换行。
.box { /* nowrap：不换行（默认） */ /* wrap：换行，第一行在上方 */ /* wrap-reverse：换行，第一行在下方 */ flex-wrap: nowrap | wrap | wrap-reverse;}flex-wrap: wrap-reverse
flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的合并简写模式，默认值为row nowrap。
.box { flex-flow: <flex-direction> || <flex-wrap>;}justify-content属性
justify-content属性用于指定我的项目在主轴上的对齐形式。
.box { /* flex-start：左对齐（默认） */ /* flex-end：右对齐 */ /* center：居中 */ /* space-between：我的项目与我的项目的距离相等，我的项目与容器边框之间没有距离 */ /* space-around：每个我的项目两侧的距离相等（我的项目之间的距离比我的项目与容器边框的距离大一倍 */ justify-content: flex-start | flex-end | center | space-between | space-around;}align-items属性
align-items属性用于指定我的项目在穿插轴上的对齐形式。
.box { /* flex-start：穿插轴上沿对齐 */ /* flex-end：穿插轴下沿对齐 */ /* center：穿插轴中点对齐 */ /* stretch：拉伸，占满整个容器（默认） */ /* baseline：我的项目第一行文字的基线对齐 */ align-items: flex-start | flex-end | center | stretch | baseline;}align-content属性
align-content属性用于指定多个轴线的对齐形式。（若只有一根轴线，则该属性不起作用。）
.box { /* flex-start：穿插轴上沿对齐 */ /* flex-end：穿插轴下沿对齐 */ /* center：穿插轴中点对齐 */ /* stretch：拉伸，占满整个穿插轴（默认） */ /* space-between：轴线与轴线的距离相等，轴线与穿插轴高低沿之间没有距离 */ /* space-around：每个轴线两侧的距离相等（轴线之间的距离比轴线与穿插轴高低沿的距离大一倍 */ align-content: flex-start | flex-end | center | stretch | space-between | space-around;}我的项目的属性
order属性
order属性用于指定我的项目的排列程序。数值越小排列越靠前，默认为0。
.item { order: <integer>;}flex-grow属性
flex-grow属性用于指定有残余空间时我的项目的放大比例。默认为0，即便有残余空间也不放大。若所有我的项目的flex-grow属性值相等，则等分残余空间；若不相等，则按比例划分残余空间。
.item { flex-grow: <number>;}flex-shrink属性
flex-shrink属性用于指定空间有余时我的项目的放大比例。默认为1，即空间有余时进行放大。若flex-shrink属性设为0，则不进行放大。若所有我的项目的flex-shrink属性不相等，则依照比例进行放大。
.item { flex-shrink: <number>;}flex-basis属性
flex-basis属性用于指定在调配残余空间前我的项目占用的主轴空间（main size）。浏览器依据这个属性计算主轴的残余空间。默认为auto，即我的项目原本的大小。
.item { flex-basis: <length> | auto;}flex属性
flex属性是flex-grow属性、flex-shrink属性和flex-basis属性的合并简写模式（后两个属性可选），默认为flex: 0 1 auto;。倡议优先应用这一合并简写模式。
.item { flex: auto | none | <flex-grow> <flex-shrink> <flex-basis>;}该属性的两个快捷值：auto（1 1 auto）和none（0 0 auto）。
align-self属性
align-self属性用于指定单个我的项目应用与父元素align-items属性不同的穿插轴对齐形式，可笼罩align-items属性，默认为auto，示意继承父元素的align-items属性，若没有父元素则等同于stretch。
.item { /* 除 auto 外均与 align-items 属性的可选值雷同 */ align-self: auto | flex-start | flex-end | center | stretch | baseline;}