css3引入了一種新的布局模型——flex布局。flex是flexible box的縮寫，一般稱之為彈性盒模型。和css3其他屬性不一樣，flexbox並不是乙個屬性，而是乙個模組，包括多個css3屬性。flex布局提供一種更加有效的方式來進行容器內的專案布局，以適應各種型別的顯示裝置和各種尺寸的螢幕
flexbox布局的語法規範經過幾年發生了很大的變化。從2023年07月，flex第一版本的工作草案發布，到2023年09月，flex最新版本成為候選推薦。flex主要經歷了三個版本
舊版本 display:box | inline-box;
ie瀏覽器不支援，windows下的safari瀏覽器只支援舊版本的寫法且需要新增字首，移動端可以相容到andriod2.1-4.3和ios3.2-6.1也需要新增字首
混合版本 display:flexbox | inline-flexbox;
該版本只有ie10支援，且需要新增字首-ms-
新版本 display: flex | inline-flex
該版本相容ie11+、firefox、safari、chrome、opera及移動端，但移動端ios7.1-8.4需要新增字首-webkit-
要讓乙個元素變成伸縮容器，需要使用display屬性。採用flex布局的元素，稱為伸縮容器(flex container)，容器內的子元素稱為伸縮專案(flex item)
[注意]瀏覽器會將任何直接在伸縮容器裡的連續文字塊包起來成為匿名伸縮專案
使用flex布局實現上是使元素ffc化(flex formatting context伸縮格式化上下文)，ffc是普通流的一種。而浮動流和定位流以及css其他屬性對ffc是有影響的，主要表現在以下幾點:
[1]float、clear和vertical-align屬性在伸縮專案上沒有效果
[2]伸縮容器的margin與其內容的margin不會重疊
[3]text-align屬性在伸縮容器上沒有效果，因為其只可應用於塊級block容器
[4]另外，conlumns屬性伸縮容器上沒有效果
彈性盒模型的兩種容器塊級伸縮容器和內聯伸縮容器的區別類似於block和inline-block的區別，乙個獨佔一行，另乙個非獨佔一行
//彈性盒模型: 塊級伸縮容器 | 內聯伸縮容器
//新版本
display: flex | inline-flex;
//混合版本
display: flexbox | inline-flexbox;
//舊版本
display: box | inline-box;
css 彈性盒模型Flex 布局
參考文章 flex 布局是什麼 採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專案 flex item 簡稱 專案 容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 如下 fle...
Flex彈性盒模型
flex direction用來控制子項整體布局方向，是從左往右還是從右往左，是從上往下還是從下往上。flex direction row 布局的排列方向 主軸排列方向 row 預設值，顯示為行。方向為當前文件水平流方向，預設情況下是從左往右。row reverse 顯示為行。但方向和row屬性值是...
彈性盒模型，flex布局
彈性盒子是css3的一種新布局模式，由容器 父元素 和專案 子元素 組成。彈性盒子是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒模型的目的 提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白區間。設定彈性盒子 display flex或...