flexbox，一種css3的布局模式，也叫做彈性盒子模型，用來為盒裝模型提供最大的靈活性。首先舉乙個栗子，之前我們是這樣實現乙個div盒子水平垂直居中的。在知道物件高寬的情況下，對居中元素絕對百分比定位，然後通過margin偏移的方式來實現。
"container">"box">
假如使用了flex後，實現起來就簡單了，而且不需要自己去算，也不需要絕對定位，只需要通過對伸縮容器定義兩個屬性，justify-content定義伸縮專案沿著主軸線的對齊方式為center， align-items定義伸縮專案在側軸(垂直於主軸)的對齊方式為center，具體如下：
"container">"box">
其實flexbox的優秀特性並不是這一些，首先來一張它的屬性圖吧~
首先我們來分析下這一張圖，從第乙個子節點可以看到flexbox由flex容器和flex專案組成，容器即父元素，專案即子元素。他們之間的一些關係可以這樣來表示：
這張圖可以在接下來的屬性分析中用到。
flex容器
display:flex
當我們使用flexbox布局時候，需要先給父容器的display值定位flex(塊級)或者inline-flex(行內級)。
當使用了這個值以後，伸縮容器會為內容建立新的伸縮格式化上下文(ffc)，它的上下文展示效果和bfc根元素相同(bfc特性：浮動不會闖入伸縮容器，且伸縮容器的邊界不會與其內容邊界疊加)。
伸縮容器不是塊容器，因此有些設計用來控制塊布局的屬性，在伸縮布局中不適用，特別是多欄(column)，float，clear，vertical-align這些屬性。
flex-direction
[flex-direction]屬性用來控制上圖中伸縮容器中主軸的方向，同時也決定了伸縮專案的方向。
網頁展示效果如下：
[flex-wrap]屬性控制伸縮容器是單行還是多行，也決定了側軸方向(新的一行的堆放方向)。
網頁效果見圖;
[flex-flow]屬性為flex-direction(主軸方向)和flex-wrap(側軸方向)的縮寫，兩個屬性決定了伸縮容器的主軸與側軸。
舉兩個栗子：
網頁效果如下：
這裡大家可以多自己去試試不同的組合。
justify-content
[justify-content]用於定義伸縮專案在主軸上面的的對齊方式，當一行上的所有伸縮專案都不能伸縮或可伸縮但是已經達到其最大長度時，這一屬性才會對多餘的空間進行分配。當專案溢位某一行時，這一屬性也會在專案的對齊上施加一些控制。
還是看demo理解起來快一點：
[align-items]用來定義伸縮專案在側軸的對齊方式，這類似於[justify-content]屬性，但是是另乙個方向。(flex-directon和flex-wrap是一對，justify-content和align-items是一對，前者分別定義主軸和側軸的方向，後者分別定義主軸和側軸中專案的對齊方式)。
下面demo只展示center和stretch的栗子，其他幾個可以參考flex-start和flex-end那樣。
[align-content]屬性可以用來調準伸縮行在伸縮容器裡的對齊方式，這與調準伸縮專案在主軸上對齊方式的[justify-content]屬性類似。只不過這裡元素是以一行為單位。請注意本屬性在只有一行的伸縮容器上沒有效果。當使用flex-wrap:wrap時候多行效果就出來了。
其他可以參考[justify-content]用法。
具體來至w3.org官方文件;
太麻煩。寫不下去了，摔。
flex專案
終於寫到關於伸縮專案的相關屬性了，主要是3個，order，flex(flex-grow，flex-shrink，flex-basis的組合)，align-self;用來比較多的是前兩個。
order
有一種用法比較多，想設定一組中有兩個元素乙個排第一，另外乙個排最後，主需要將第乙個的order:-1;另乙個為order:0;這樣就好了。
譬如我們想控制乙個container中有4個box，想box4為乙個顯示，box1為最後乙個顯示。只需要 這樣
"container">"box1">1
"box2">2
"box3">3
"box4">4
顯示效果就這樣了：
[flex]屬性可以用來指定可伸縮長度的部件，是flex-grow(擴充套件比例),flow-shrink(收縮比例),flex-basis(伸縮基準值)這個三個屬性的縮寫寫法，建議大家採用縮寫的方式而不是單獨來使用這3個屬性。
flex:none | [ ? || ]// flex-grow是必須得flex-shrink和flow-basis是可選的
flex-basis用圖來表示就是這樣：
align-self
[align-self]用來在單獨的伸縮專案上覆寫預設的對齊方式，這個屬性是用來覆蓋伸縮容器屬性align-items對每一行的對齊方式。也就是說在預設的情況下這兩個值是相等的。
align-self: auto | flex-start | flex-end | center | baseline | stretch我的看法
講了這麼多他們的使用，我們來看一看flexbox布局的相容性。
在pc端其實很樂觀了，基本上主流的瀏覽器都已經相容了flex的使用，但是到了移動端就不是那麼好了，特別是國內瀏覽器，考慮到uc瀏覽器佔了大頭，但是uc從圖中看到只相容flex最老的乙個版本，也就是2023年的版本，即display:box;很多現在flex的優秀特性到了它上面都不相容了，所以建議大家在使用的時候，假如2009版本可以滿足開發要求的話，還是去使用2009版本，這樣風險更小。
但是假如想相容多個瀏覽器，可以採用優雅降級的方式來使用，這裡推薦乙個scss的sass-flex-mixin,這樣就可以使用最新的寫法，並且相容大部分瀏覽器了。
相信flexbox布局在以後的移動端會用得越來越多的。
談談我對flexbox的理解
寫在開頭 關於flex，學了很久的前端了，偶爾也在用，尤其是當需要水平居中的時候，就用display flex，感覺非常好用。但是其實對於flex的理解並不是很到位，根本都不懂flex，所以正兒八經的來研究一下flexbox。flex布局模型不同於塊和內聯模型布局，塊和內聯模型的布局計算依賴於塊和內...
我對android中Activity的理解
一 activity是什麼 在我們的應用中，我們看到裝置螢幕顯示出來的東西都是屬於activity的，activity可以說是乙個平台，這個平台上我們用來展示view的各種子類 布局 控制項 自定義的view activity就像乙個魚缸或者窗戶，而view就像魚缸的水和魚，窗戶外面的風景。我們看到...
Flexbox 布局的最簡單表單
作者 阮一峰 彈性布局 flexbox 逐漸流行，越來越多人使用，因為它寫 css 布局真是太方便了。三年前，我寫過 flexbox 的介紹 上，下 但是有些地方寫得不清楚。今天，我看到一篇教程，才意識到乙個最簡單的表單，就可以解釋 flexbox，而且內容還很實用。下面，你只需要10分鐘，就可以學...