/* flex-flow: flex-direction flex-wrap;復(fù)合屬性

? ? ? ? ? ? ? ?flex-direction: 設(shè)置主軸的方向;

? ? ? ? ? ? ? ?flex-wrap: 設(shè)置子元素是否換行; */

? ? ? ? ? ? /* flex-direction: row默認(rèn)值從左到右 ? （默認(rèn)主軸為x軸）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?row-rever從右到左

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?column從上到下

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?column-rever從下到上 */

? ? ? ? ? ? /* ?flex布局中默認(rèn)子元素是不換行的，如果裝不開，會縮小子元素寬度

? ? ? ? ? ? ? ? flex-wrap:nowrap 默認(rèn)不換行

? ? ? ? ? ? ? ? ? ? ? ? ? wrap ? 換行 */

? ? ? ? ? ? /* 復(fù)合屬性flex-flow:flex-direction flex-wrap

? ? ? ? ? ? ? ?flex-flow: row nowrap;主軸x軸 ?子元素不換行 */

? ? ? ? ? ? /* 主軸上子元素對齊方式 */

? ? ? ? ? ? /* justify-content: flex-start; 左對齊

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? flex-end; 右對齊

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? center; 水平方向居中

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? apace-between緊靠邊對齊

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? space-around子元素左右邊距一樣,相鄰子元素之間距離翻倍

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? space-evenly子元素相鄰的距離保持一致*/

? ? ? ? ? ? /* 定義在交叉軸上的對齊方式 */

? ? ? ? ? ? /* justify-content: center;水平方向居中 */

? ? ? ? ? ? /* align-items: center; 垂直方向居中*/

? ? ? ? ? ? /* align-items: flex-start;垂直方向的頂部，交叉軸的起點(diǎn)對齊 */

? ? ? ? ? ? /* align-items: flex-end;垂直方向的底部，交叉軸終點(diǎn)對齊 */

? ? ? ? ? ? /* baseline :項(xiàng)目第一行的文字的基線對齊

? ? ? ? ? ?align-items: baseline;垂直方向按照子元素所在的位置進(jìn)行對齊 */