1.布局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float 屬性。
它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。
2.2023年，w3c提出了一種新的方案—-flex布局，可以簡便、完整、響應式地實現各種頁面布局。
3.已經得到了所有瀏覽器的支援
4.flex布局是什麼？：flex是flexible box的縮寫，意為」彈性布局」。
5.任何乙個容器都可以指定為flex布局（div）
6.行內元素也可以使用flex布局（li，a等）
7.設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。
8.基本概念
採用flex布局的元素，（flex container），簡稱」容器」。
它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱」專案」。
容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）
9.容器的屬性
以下6個屬性設定在容器上。
flex-direction
flex-wrap
flex-flow //預設值為row nowrap,專案的排列方向,換行?
justify-content //定義了專案在主軸上的對齊方式
align-items //定義專案在交叉軸上如何對齊
align-content //定義了多根軸線的對齊方式
10.專案的屬性
flex //flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
以下6個屬性設定在專案上。
order //order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0
flex-grow //flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
flex-shrink //flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
flex-basis //定義了在分配多餘空間之前，
//專案佔據的（main size)瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
flex //flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
align-self // align-self屬性允許單個專案有與其他專案不一樣的對齊方式
**/* 水平方向 */
.flex_container
.flex_item
彈性盒模型布局（FLEX布局）
display flex 新增在伸縮容器 父元素的 flex direction 伸縮布局方向 row 左向右 row reverse 水平返向 column 上向下 column reverse flex wrap 換行 nowrap不換行 預設值 wrap 換行 超出才換行，不超出不換行 wra...
彈性盒模型，flex布局
彈性盒子是css3的一種新布局模式，由容器 父元素 和專案 子元素 組成。彈性盒子是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒模型的目的 提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白區間。設定彈性盒子 display flex或...
css 彈性盒模型Flex 布局
參考文章 flex 布局是什麼 採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專案 flex item 簡稱 專案 容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 如下 fle...