flexbox 是 flexible box 的簡稱（注：意思是「靈活的盒子容器」），是 css3 引入的新的布局模式。它決定了元素如何在頁面上排列，使它們能在不同的螢幕尺寸和裝置下可**地展現出來。它之所以被稱為 flexbox ，是因為它能夠擴充套件和收縮 flex 容器內的元素，以最大限度地填充可用空間。與以前布局方式（如 table 布局和浮動元素內嵌塊元素）相比，flexbox 是乙個更強大的方式：
採用 flex 布局的元素，稱為 flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 flex 專案（flex item），簡稱"專案"。
在 flexbox 模型中，有三個核心概念：
– flex 項（注：也稱 flex 子元素），需要布局的元素
– flex 容器，其包含 flex 項
– 排列方向（direction），這決定了 flex 項的布局方向
定義了多根軸線的對齊方式，如果專案只有一根軸線，那麼該屬性將不起作用
flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果乙個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。
負值對該屬性無效。
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
彈性布局預設不改變專案的寬度，但是它預設改變專案的高度。如果專案沒有顯式指定高度，就將佔據容器的所有高度。
參考：
css flex 彈性布局詳解
案例基礎布局 html 上面我給每個item 都設定了 不同的高度 和 line height 可以看到 容器為了讓文字對齊 而調整自己的位置 align content 定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。box 嘗試新增 align content flex end ...
css flex彈性盒模型布局
三 作用在子容器的樣式 flex特性 當多個div子元素寫在父容器，他們會併排在一行，父容器會自動調節子容器大小，使他們併排在一起，但不會容下無限個，會根據子容器中的內容決定，當內容多過父容器的大小時，其他的子容器會溢位在父容器外。這時，可以通過flex wrap對子容器進行換行。當父容器displ...
CSS Flex彈性布局實現Div
前言前端樣式開發時經常會遇到 當子 div 長度大於 父 div 中需要實現換行時，我們採取flex布局解決此問題。如下 div 開啟應用div div div 開啟應用div div div 開啟應用div div div 開啟應用div div div 開啟應用div div div div 樣...