CSS篇：Flex佈局
1 flex 概念
CSS 彈性盒子佈局是 CSS 的模塊之一，定義了一種針對用戶界面設計而優化的 CSS 盒子模型。在彈性佈局模型中，彈性容器的子元素能夠在任何方向上排布，也能夠「彈性伸縮」其尺寸，既能夠增長尺寸以填滿未使用的空間，也能夠收縮尺寸以免父元素溢出。子元素的水平對齊和垂直對齊都能很方便的進行操控。經過嵌套這些框（水平框在垂直框內，或垂直框在水平框內）能夠在兩個維度上構建佈局。前端
2 flex 基本模型
-
「主軸（main axis）」 是沿着 flex 元素放置的方向延伸的軸（好比頁面上的橫向的行、縱向的列）。 -
「主軸方向」 該軸的開始和結束被稱爲 main start 和 main end。 -
「交叉軸（cross axis）」 是垂直於 flex 元素放置方向的軸。 -
「交叉軸方向」 該軸的開始和結束被稱爲 cross start 和 cross end。
3 屬性說明
父容器
| 屬性 | 取值 | 描述 |
|---|---|---|
| flex-direction | row row-reverse column column-reverse |
默認值，主軸爲水平，從左向右排列 主軸爲水平，從右向左排列 主軸爲垂直方向，從上向下排列 主軸爲垂直方向，從下向上排列 |
| flex-wrap | nowrap wrap wrap-reverse |
默認值，顯示在同一行，不換行 一行顯示不了時換行顯示 同 wrap，可是從下向上顯示 |
| flex-flow(縮寫) | flex-direction flex-wrap | 默認值，row nowrap |
| justify-content | flex-start flex-end center space-between space-around |
默認值，從起始位置對齊，又稱左對齊 從結束位置對齊，又稱右對齊 居中對齊 兩端對齊，平均間隔 子元素都有相等的外邊距，相鄰元素外邊距不疊加 |
| align-items | stretch flex-start flex-end center baseline |
默認值，沒指定高度或者高度爲 auto 時則會佔滿空間 交叉軸起點開始對齊 交叉軸結束位置對齊 相對交叉軸居中對齊 與基線對齊 |
| align-content | stretch flex-start flex-end center space-between space-between |
默認值，各行會伸展以佔滿整個交叉軸空間 對齊到交叉軸起點 對齊到交叉軸終點 相對交叉軸中間對齊 各行相對交叉軸兩端對齊，各行間隔相等 各行都有相等的外邊距，各行的外邊距不會疊加 |
子容器
| 屬性 | 取值 | 描述 |
|---|---|---|
| flex-grow | 任何正整數 | 指定子容器的放大比例, 默認爲 0(即不放大) |
| flex-shrink | 任何正整數 | 指定子容器的縮小比例，默認 1，值爲 0 時表示不縮小 |
| flex-basis | atuo | 默認值，atuo，定義子容器的默認尺寸 |
| flex(縮寫) | flex-grow flex-shrink flex-basis | 默認值爲 0 1 auto |
| align-self | stretch flex-start flex-end center baseline |
默認值，沒指定高度或者高度爲 auto 時則會佔滿空間 交叉軸起點開始對齊 交叉軸結束位置對齊 相對交叉軸居中對齊 與基線對齊 |
| order | 數字 | 默認爲 0，指定子容器的順序，數值越小，順序越靠前 |
4 父容器屬性使用
4.1 flex-direction
-
「flex-direction:row」
-
「代碼塊」
.parent {
display: flex; flex-direction: row; } 複製代碼
-
「flex-direction:row-reverse」
web -
「代碼塊」微信
.parent {
display: flex; flex-direction: row-reverse; } 複製代碼
-
「flex-direction:column」
-
「代碼塊」
.parent {
display: flex; flex-direction: column; } 複製代碼
-
「flex-direction:column-reverse」
-
「代碼塊」
.parent {
display: flex; flex-direction: column-reverse; } 複製代碼
4.2 flex-wrap
-
「flex-wrap: nowrap」
-
「代碼塊」
.parent {
display: flex; flex-wrap: nowrap; } 複製代碼
-
「flex-wrap: wrap」
編輯器 -
「代碼塊」佈局
.parent {
display: flex; flex-wrap: wrap; } 複製代碼
-
「flex-wrap: wrap-reverse」
post -
「代碼塊」學習
.parent {
display: flex; flex-wrap: wrap-reverse; } 複製代碼
4.3 justify-content
-
「justify-content: flex-start」
flex -
「代碼塊」優化
.parent {
display: flex; justify-content: flex-start; } 複製代碼
-
「justify-content: flex-end」
-
「代碼塊」
.parent {
display: flex; justify-content: flex-end; } 複製代碼
-
「justify-content: center」
ui -
「代碼塊」
.parent {
display: flex; justify-content: center; } 複製代碼
-
「justify-content: space-between」
-
「代碼塊」
.parent {
display: flex; justify-content: space-between; } 複製代碼
-
「justify-content: space-around」
-
「代碼塊」
.parent {
display: flex; justify-content: space-around; } 複製代碼
4.4 align-items
-
「align-items: stretch」 不固定子容器高度
-
「代碼塊」
.parent {
display: flex; align-items: stretch; } 複製代碼
-
「align-items: flex-start」
-
「代碼塊」
.parent {
display: flex; align-items: flex-start; } 複製代碼
-
「align-items: flex-end」
-
「代碼塊」
.parent {
display: flex; align-items: flex-end; } 複製代碼
-
「align-items: center」
-
「代碼塊」
.parent {
display: flex; align-items: center; } 複製代碼
-
「align-items: baseline」
-
「代碼塊」
.parent {
display: flex; align-items: baseline; } 複製代碼
4.5 align-content
❝定義了多根軸線的對齊方式，若是項目只有一根軸線，那麼該屬性將不起做用
❞
-
「align-content: stretch」
-
「代碼塊」
.parent {
display: flex; flex-wrap: wrap; align-content:stretch; } 複製代碼
-
「align-content: flex-start」
-
「代碼塊」
.parent {
display: flex; flex-wrap: wrap; align-content:flex-start; } 複製代碼
-
「align-content: flex-end」
-
「代碼塊」
.parent {
display: flex; flex-wrap: wrap; align-content:flex-end; } 複製代碼
-
「align-content: space-between」
-
「代碼塊」
.parent {
display: flex; flex-wrap: wrap; align-content:space-between; } 複製代碼
-
「align-content: space-around」
-
「代碼塊」
.parent {
display: flex; flex-wrap: wrap; align-content:space-around; } 複製代碼
5 子容器屬性使用
5.1 flex-grow
-
「效果圖」
-
「代碼塊」
/* 按比例分配空間 */
.parent { display: flex; } .son1 { flex-grow: 1; } .son2 { flex-grow: 0; } .son3 { flex-grow: 2; } 複製代碼
5.2 flex-shrink
-
「效果圖」
-
「分配規則」
-
若是全部子容器的 flex-shrink 屬性都爲 1，當空間不足時，都將等比例縮小。 -
若是一個子容器或者多個子容器的 flex-shrink 屬性爲 0,爲 0 的不縮小。
-
「代碼塊」
.parent {
display: flex; } .son1 { flex-grow: 1; } .son2 { flex-grow: 0; } .son3 { flex-grow: 2; } 複製代碼
5.3 flex-basis
-
「效果圖」
-
「分配規則」
-
根據主軸空間的多少自由分配。
-
「代碼塊」
.parent {
display: flex; } .son1 { flex-basis: auto; } .son2 { flex-basis: 0; } .son3 { flex-basis: 200px; } 複製代碼
5.4 align-self
-
「align-self: stretch」
-
「代碼塊」
.parent {
display: flex; } .son1 { align-self: stretch; } .son2 { align-self: auto; } .son3 { align-self: auto; } 複製代碼
-
「align-self: flex-start」
-
「代碼塊」
.parent {
display: flex; } .son1 { align-self: flex-start; } .son2 { align-self: auto; } .son3 { align-self: auto; } 複製代碼
-
「align-self: flex-end」
-
「代碼塊」
.parent {
display: flex; } .son1 { align-self: flex-end; } .son2 { align-self: auto; } .son3 { align-self: auto; } 複製代碼
-
「align-self: center」
-
「代碼塊」
.parent {
display: flex; } .son1 { align-self: center; } .son2 { align-self: auto; } .son3 { align-self: auto; } 複製代碼
-
「align-self: baseline」
-
「代碼塊」
.parent {
display: flex; } .son1 { align-self: baseline; } .son2 { align-self: auto; } .son3 { align-self: auto; } 複製代碼
5.4 order
-
「效果圖」
-
「代碼塊」
.parent {
display: flex; } .son1 { order: 0 } .son2 { order: -1 } .son3 { order: -2 } .son4 { order: 1 } .son5 { order: 2 } 複製代碼
6 flex 常見佈局
6.1 水平垂直居中
-
「效果圖」
-
「代碼塊」
.parent {
display: flex; } .son { margin: auto; } 或 .parent { display: flex; justify-content: center; align-items: center; } 或 .parent { display: flex; justify-content: center; } .son { align-self: center; } 複製代碼
6.1 兩列布局
-
「左側固定，右側自適應」
-
「代碼塊」
.parent {
display: flex; justify-content: center; } .left { width: 100px; } .right { flex-grow: 1; } 複製代碼
-
「左側不固定，右側自適應」
-
「代碼塊」
.parent {
display: flex; } .right { flex-grow: 1; } 複製代碼
6.2 三列布局
-
「左側固定，中間自適應，右側固定」
-
「代碼塊」
.parent {
display: flex; } .left { width: 100px; } .middle { flex-grow: 1; } .right { width: 100px; } 複製代碼
6.2 九宮格佈局
-
「效果圖」
-
「代碼塊」
<div class="parent">
<div class="son">son</div> <div class="son">son</div> <div class="son">son</div> <div class="son">son</div> <div class="son">son</div> <div class="son">son</div> <div class="son">son</div> <div class="son">son</div> <div class="son">son</div> </div> 複製代碼
.parent {
display: flex; flex-wrap: wrap; } .son { width: calc(calc(100% / 3) - 10px); margin: 5px; height: 100px; background-color: #fda085; border-radius: 10px; display: flex; justify-content: center; align-items: center; } 複製代碼
7 flex 兼容性
後語
無 bug，不前端，好了，這篇文章就寫到這裏了，第一次寫文章有點緊張，還望各位大佬海涵，歡迎在留言評論區提出寶貴的建議。
我會不定時的更新一些前端方面的知識內容與文章，大家的鼓勵就是我創做的動力。
❝贈人玫瑰，手有餘香 ——印度古諺
❞
歡迎有興趣的同窗掃一下微信羣二維碼 參考連接：
一勞永逸的搞定 flex 佈局
MDN
Flex 佈局學習筆記
本文使用 mdnice 排版
相關文章
- 1. CSS篇 - 彈性佈局flex
- 2. CSS-Flex 佈局
- 3. Css-flex 佈局
- 4. CSS flex佈局
- 5. css flex佈局
- 6. Flex css 佈局
- 7. 【CSS】Flex佈局
- 8. css——flex佈局
- 9. CSS Flex佈局
- 10. CSS佈局——flex
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • 再有人問你分佈式事務，把這篇扔給他
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. CSS篇 - 彈性佈局flex
- 2. CSS-Flex 佈局
- 3. Css-flex 佈局
- 4. CSS flex佈局
- 5. css flex佈局
- 6. Flex css 佈局
- 7. 【CSS】Flex佈局
- 8. css——flex佈局
- 9. CSS Flex佈局
- 10. CSS佈局——flex