CSS之Flex彈性布局

—flex彈性布局實現水平垂直居中

父盒子display:flex; 子盒子margin:auto;

概念：採用 flex 布局的元素，稱為 flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 flex 專案（flex item），簡稱"專案"。父容器(display:flex)屬性： 1.flex-direction ：規定子元素的排列方向 row（預設值）：主軸為水平方向，起點在最左端。 row-reverse：主軸為水平方向，起點在最右端。 column：主軸為垂直方向，起點在最上沿。 column-reverse：主軸為垂直方向，起點在最下沿。 2.flex-wrap ： nowrap (預設值) : 單行顯示，不換行 wrap : 寬度不足換行顯示 wrap-reverse ：寬度不足換行顯示，但是從下往上顯示(原本前面的盒子跑到最下層顯示) 說明： a.預設單行顯示不換行，當盒子過多父盒子寬度不足時，會自動調整子盒子寬度，直至內容過多無法調整最終一行內溢位。 3.flex-flow : flex-direction與flex-wrap的組合寫法，第乙個表示direction第二個表示wrap，中間用空格分隔 4.justify-content ：決定了主軸方向上子項的對齊和分布方式(類似於word中的對齊排版) flex-start（預設值）：左對齊 flex-end：右對齊 center：居中 space-between：兩端對齊，專案之間的間隔都相等。 space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。 5.align-items ：定義專案在交叉軸/側軸上如何對齊 flex-start：交叉軸的起點對齊。 flex-end：交叉軸的終點對齊。 center：交叉軸的中點對齊。 baseline: 專案的第一行文字的基線對齊。 stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。說明： a.容器裡的專案若不設定固定高度則由於align-items預設為stretch, 視覺上會導致專案預設高度是撐滿整個容器的，即100%。可通過設定專案固定高度或改變align-items的值來解決 b.關於主軸和側軸，我的理解為水平和垂直或垂直和水平。即主軸代表水平方向那側軸就代表垂直方向，反之亦然 6.align-content ：定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用 flex-start：表現為起始對齊 flex-end：表現為結束位置對齊 center：表現為居中對齊 space-between：表現為兩端對齊，軸線之間的間隔平均分布。 space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。 space-evenly：每一行元素都完全上下等分。 stretch（預設值）：軸線佔滿整個交叉軸。說明：關於align-items和align-cotent容易混淆：前者多用於item在主軸上只有一行，而後者多用於item在主軸上存在多行. 且在items由於容器寬度不足換行時，上下兩個item之間會產生一大片間距，可通過align-content解決子容器屬性： 1.order ：定義專案的排列順序。數值越小，排列越靠前，預設為0。 2.flex-grow ：用於設定 item 在主軸方向上的拉伸係數，即如果 flex 容器還有剩餘空間，會按照各 item 設定的拉伸係數拉伸item長度。預設值為 0，即不拉伸。個人理解：拉伸係數 * 容器主軸方向上空白長度 = 該item拉伸的長度或幾個item拉伸係數為1 2 1，則按1:2:1的比例拉伸item以平分主軸方向上空白長度 3.flex-shrink ：用於設定 item 在主軸方向上的收縮因子，跟 flex-grow 剛好反著來，預設為1，值越大收縮倍數越大，0 表示不收縮，負值無效。另外，如果設定了換行屬性，那麼這個就無效了。 4.flex-basis ：用於設定 items 在主軸方向的大小，如果主軸是水平方向，相當於設定 width，此時，該屬性值會覆蓋掉 width 設定的大小。取值： flex-basis: <'width'> | auto(預設值) 5.flex ： flex-grow，flex-shrink，flex-basis 三個屬性的簡化使用 6.align-self ：用於給單個 item 設定交叉軸方向上的排版布局方式，屬性值和作用跟 align-items 一樣，區別僅在於

align-items 是 flex 容器的屬性，它會作用於所有的 items 上；而 align-self 允許對單個 item 設定，該值會覆蓋 align-items 設定的屬性值。

CSS之Flex彈性布局

css布局之彈性布局flex

css彈性布局（flex）

css之flex彈性布局使用

CSS之Flex彈性布局

css布局之彈性布局flex

css彈性布局（flex）

css之flex彈性布局使用

相關推薦