本文演示 demo 地址 flexbox-demo
簡介
- Flexbox（Flexible Box）彈性盒顽照，彈性盒為 CSS 增加了一種新的布局方式 — 彈性布局精刷。
- 由于桌面瀏覽器對 Flexbox 的支持還未得到普及谎亩，因此它還未成為桌面端頁面的主流布局方式荞怒。而在移動端粪般，當瀏覽器的兼容已不是最大的問題時有决，我們就可以使用 Flexbox 布局了。
- Flexbox 對于移動端有著特別的意義空盼。在傳統(tǒng)的定位方式中有很多float屬性书幕，這些浮動對于移動端來說就是對渲染性能的消耗。而在 Flexbox 中揽趾，浮動成為了歷史台汇，這變相提升了移動端的性能。此外開發(fā)者也不必再去計算那些讓人煩惱的 margin篱瞎、padding苟呐、width 和 height，可以把這一切都交給 Flexbox, 由它來選擇最佳的空間利用方式俐筋。
基礎知識
- 彈性容器
任何 HTML 元素都可以作為彈性容器牵素。 - 彈性項目
直接嵌套在彈性容器里的標簽叫彈性項目。彈性容器的每個直接子代都會自動變成彈性項目校哎。
彈性容器相關的屬性
display
/* 把元素設成彈性容器 */
display: flex
flex-flow
- 默認情況下两波，彈性項目并排顯示成一行瞳步。而且瀏覽器只在一行里顯示各個彈性項目闷哆，不會換行。
- flex-flow 屬性是另外兩個彈性盒相關的 CSS 屬性的簡寫形式：flex-direction 和 flex-wrap单起。
- flex-flow 屬性既能控制彈性項目的排列方向抱怔，也能控制是否換行。這個屬性之間用兩個值嘀倒，之間用空格分隔屈留。第一個指明方向，第二個值指明是否換行测蘑。
- 第一個參數(shù)：控制方向
- row：各個彈性項目并排顯示（默認設置）
- row-reverse
- column：各個彈性項目縱向疊放
- column-reverse
- 第二個參數(shù)：控制是否換行
- nowrap：常規(guī)行為
- wrap
- wrap-reverse
.container {
display: flex;
flex-flow: column-reverse nowrap;
}
justify-content
- justify-content 屬性告訴瀏覽器把彈性項目顯示在一行里的什么位置灌危。只有為彈性項目設置了寬度，而且各個項目的寬度之和小于彈性容器的寬度時碳胳，這個屬性才起作用勇蝙。
- 如果寬度是彈性的，justify-content 屬性完全沒有效果挨约。
- 這個屬性有五個可選值：
- flex-start：項目在一行里靠左對齊味混。如果把方向設為 row-reverse，則會靠右對齊各個項目诫惭。
- flex-end：項目在一行里靠右對齊翁锡。如果把方向設為 row-reverse，則會靠左對齊各個項目夕土。
- center：彈性項目居中顯示在容器中間馆衔。
- space-between：均布各個項目，項目之間的空間大小相同，兩邊項目貼近容器邊緣哈踱。
- space-around：把容器里剩余的控件平均分給各個項目荒适，包括最左邊和最右邊的項目。
align-items
- align-items 屬性決定高度不同的彈性項目在彈性容器里的縱向對齊方式开镣。默認情況下刀诬，彈性項目會拉伸，因此高度都相同邪财。
- 如果容器的方向是 column俏竞，align-items 屬性用于控制寬度不同縱排彈性項目在彈性容器里的橫向對齊方式玷犹。
- 這個屬性有五個可選值：
- flex-start：把各個彈性項目的頂邊與容器的頂邊對齊。
- flex-end：把各個彈性項目的底邊與容器的底邊對齊。
- center：把各個彈性項目的縱向中心線與容器的縱向中心線對齊中鼠。
- baseline：把各個彈性項目里第一個元素的基線對齊。
- stretch：拉伸容器里的各個項目姨丈，使各個項目的高度相同（常規(guī)行為）岸蜗。
align-content
- 這個屬性告訴瀏覽器如何放置顯示為多行的彈性項目
- 只有滿足兩個條件，align-content 屬性才會起作用：
- 彈性容器必須允許換行绊袋。
- 彈性容器的高度必須大于多行顯示的彈性項目毕匀。
- 這個屬性有六個可選值：
- flex-start：把各行彈性容器放在彈性容器的頂部。
- flex-end：把各行彈性容器放在彈性容器的底部癌别。
- center：把各行整體的縱向中心線與容器的縱向中心線對齊皂岔。
- space-between：把縱向額外的空間平均分布在各行之間，上下兩行貼近容器邊緣展姐。
- space-around：把縱向額外的空間平均分布在各行之間躁垛，包括上下兩行。
- stretch：拉伸容器里的各個項目圾笨，讓一行里的項目高度相同教馆。如果項目里的內容不一樣多，可行的高度不相同（常規(guī)行為）擂达。
彈性項目相關的屬性
order
- order 屬性用于為彈性項目設置數(shù)值土铺，指明項目在行（或列）里的位置
- order 屬性的數(shù)值與 z-index 屬性的數(shù)值作用類似，因此不必要使用連續(xù)的數(shù)字谍婉。
- 有時可能只想把一列移動到最左邊或最右邊舒憾。此時只需為想移動的項目設置 order 屬性，其他項目都別設置穗熬。設為 -1镀迂，項目會被移到彈性容器的左邊；設為1唤蔗，項目會移到最右邊探遵。
align-self
- 只應用于單個彈性項目窟赏，會覆蓋 align-items 屬性的值。
flex
- flex 屬性可以彈性設置彈性項目的寬度
- 默認值：flex: 0 1 auto;
- flex 屬性有3個參數(shù)：
- flex-grow（當項目的寬度之和小于容器的寬度時有用）
- flex-shrink（當項目的寬度之和大于容器的寬度時有用）
- flex-basis（允許彈性容器換行時箱季，flex-basis 屬性值才真正有用）
Tips
- 對彈性項目來說涯穷，把外邊距設為auto的意思是，讓瀏覽器根據(jù)可用空間自行設置外邊距的大小
