1.flex-direction:設(shè)置容器內(nèi)部元素的排列方向
row: 定義排列方向 從左到右

row-reverse: 從右到左

column: 從上到下

column-reverse: 從下到上

圖片介紹

flex-direction:row

flex-direction:row-reverse

flex-direction:column

flex-direction:column-reverse

2.flex- :定義 flex 容器
nowrap: 不換行
wrap: 換行
wrap-reverse: 逆向換行
圖片介紹
flex-wrap: wrap;（容器有高度則下一行平分高度）

flex-wrap: nowrap;（已經(jīng)壓縮元素）

flex-wrap: wrap-reverse;（容器有高度則下一行平分高度）

3.justify-content:設(shè)置元素在主軸上的對(duì)其方式
flex-start: (默認(rèn))左對(duì)齊 或者 向上對(duì)齊
flex-end: 右對(duì)齊 或者 向下對(duì)齊
center: 居中對(duì)齊
space-between: 兩端對(duì)齊，元素之間平均等分剩余空白間隙部分
space-around: 元素兩邊平均等分剩余空白間隙部分，最左（上）或最右（下）和
元素之間距離是 1:2
圖文介紹
justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

4.align-items:設(shè)置容器中元素在交叉軸上的對(duì)齊方式
圖片介紹（主軸為 row）
align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

5.align-content:當(dāng)軸線超過(guò)1條的時(shí)候，flex容器可以把多條軸線視為元素對(duì)待，
可以進(jìn)行對(duì)齊
圖片介紹（主軸從上到下）
align-content: center;

align-content: flex-start;

align-content: flex-end;

align-content: stretch;

align-content: space-between;

align-content: space-around;

6.成員項(xiàng)的屬性
order：成員排列順序
Fle-grow:用于設(shè)置元素的放大比例，默認(rèn)為 0（撐滿主軸剩余）
Flex-shrink:控制元素比例縮?。ㄖ鬏S滿了為前提）
Flex-basis:設(shè)置元素固定或者自動(dòng)空間的占比（對(duì)自己本身進(jìn)行操作）
align-self：重寫容器中元素在交叉軸上的對(duì)齊方式

————————————————
版權(quán)聲明：本文為CSDN博主「偏偏瀟灑程序猿」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/u011318755/article/details/102799931