【CSS】必知必会弹性盒

帮助理解弹性盒各个的属性的小游戏。
http://flexboxfroggy.com/

弹性盒

一、开启弹性盒模型

1. display:flex;

2. display:inline-flex;

   弹性盒和内联弹性盒的区别，弹性盒高度会被子元素撑开，弹性盒宽度100%占据整行。内联弹性盒高度和宽度均由子元素宽高撑开，不会占据整行。开发中一般用display:flex 。

二、主轴方向和是否允许换行

1. flex-direction

   搞清楚主轴和交叉轴的含义，不要用横轴和竖轴描述这样是不正确的。

   主轴方向：

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

   row 默认　→　　 row-reserve ←　　 column ↓　　 column-reverse ↑

2. flex-wrap

   是否换行:

   flex-wrap:no-wrap | wrap | wrap-reserve;

3. flex-flow

   flex-flow 属性是 flex-direction 和 flex-wrap 的组合写法

   flex-flow:row no-wrap;

三、排列布局

1. justify-content

   主轴方向的对齐方式

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

   flex-start容器开头　　flex-end容器结尾　　center居中　　 space-around两头留白，中间留白　　space-between两头齐，中间留白

2. align-items

   交叉轴（与主轴垂直）的对齐方式，align-items对弹性盒的每一项单独对齐。单行多行都能使用。

   align-items:flex-start | flex-end | center | space-around | space-between;

3. align-content

   当有多根主轴（使用wrap换行，即多行时）。align-content对弹性盒的所有元素看作一个整体使用。对单行是无效的，只适用于多行。不如align-items实用。

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

4. align-self

   对弹性盒中某一个子元素，在交叉轴进行单独的对齐。

   align-self:flex-start | flex-end | center;

四、弹性盒中子项的尺寸

一个元素在弹性盒中的宽度由flex-basis、flex-grow、flex-shrink共同决定。

1. flex-basis

   规定了弹性盒中子元素在主轴方向的初始宽度，flex-basis比width有更高优先级。默认auto，根据子元素的大小。

   与盒模型的关系：flex-basis只能在content-box上，对box-sizing:border-box是无效的。

2. flex-grow

   定义项目的放大比例，默认为0.

   如果存在剩余空间（父元素大于子元素宽度之和），默认为0，不放大。剩余空间均分为份数，flex-grow:1（若只分1份，剩余空间全部给予），以此类推。

3. flex-shrink

   定义项目的缩小比例，默认为1（平均变小）

   如果剩余空间不存在（父元素小于子元素宽度之和）若定义flex-shrink份数，缩小对应比例的空间。

4. flex:

   flex为三个属性的缩写， flex-grow, flex-shrink, flex-basis

   flex-grow: 可拉伸 默认0

   flex-shrink: 可压缩 默认1

   flex-basis: 当前元素的宽度 默认auto

   flex:1 ---其实应写成，flex-grow: 1; flex-shrink: 1; flex-basis: 0% (忽略自身宽度)

   flex:auto ---其实应写成，flex-grow: 1; flex-shrink: 1; flex-basis: auto（元素自身宽度）

flex:1和flex:auto有什么区别，请点击站内跳转。