CSS3彈性盒子Flex

基礎知識和術語

原文鏈接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

父級（flex容器）的屬性

＃顯示

這定義了一個flex容器;?內聯或塊取決于給定的值。它為所有直接的孩子提供了一個彈性環境。

.container {display: flex; /* or inline-flex */ }

請注意，CSS列對flex容器沒有影響。

＃flex-direction

這建立了主軸，從而定義了柔性物品放置在柔性容器中的方向。Flexbox是（除了可選包裝）單向布局概念。將flex項目視為主要布置在水平行或垂直列中。

.container {flex-direction: row | row-reverse | column | column-reverse; }

• row（默認）：從左到右在ltr;?從右到左rtl
• row-reverse：從右到左ltr;?從左到右在rtl
• column：相同row但從上到下
• column-reverse：相同row-reverse但從下到上

＃flex-wrap

默認情況下，flex項目都將嘗試適合一行。你可以改變它，并允許項目根據需要用這個屬性進行包裝。

.container{flex-wrap: nowrap | wrap | wrap-reverse; }

• nowrap?（默認）：所有彈性項目將在一行上
• wrap：flex項目將從上到下包裝成多行。
• wrap-reverse：flex項目將從下到上包裝成多行。

＃flex-flow（適用于：父Flex容器元素）

這是一個簡寫flex-direction和flex-wrap屬性，它們一起定義了柔性容器的主軸和交叉軸。默認是row nowrap。

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

＃justify-content

這定義了沿主軸的對齊。當一條線上的所有彈性物品都不靈活或靈活但達到其最大尺寸時，它有助于分配剩余空間。當物品溢出時，它也對物品的對齊進行控制。

.container {justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; }

• flex-start?（默認）：項目打包到起始行
• flex-end：項目被打包到結束行
• center：物品沿著這條線居中
• space-between：項目均勻分布在行中;?第一項是在起始行，最后一行是最后一行
• space-around：物品均勻分布在線上，周圍有相同的空間。請注意，視覺上空間不相等，因為所有物品在兩側都有相同的空間。第一個項目將在容器邊緣有一個空間單位，但下一個項目之間有兩個空間單元，因為下一個項目有其自己的間距。
• space-evenly：項目是分布式的，以便任何兩個項目之間的間距（以及到邊緣的空間）是相等的。

＃align-items

這定義了flex項目沿當前行的橫軸放置的默認行為。把它看作是justify-content橫軸（垂直于主軸）的版本。

.container {align-items: flex-start | flex-end | center | baseline | stretch; }

• flex-start：項目的跨起始邊緣邊緣放置在交叉起始線上
• flex-end：物品的交叉邊緣邊緣放置在交叉線上
• center：項目以交叉軸為中心
• baseline：項目對齊，比如他們的基線對齊
• stretch?（默認）：拉伸填充容器（仍然尊重最小寬度/最大寬度）

＃align-content

當橫軸上有額外的空間時，這會將柔性容器的線justify-content對齊，類似于如何在主軸內對齊單個項目。

注意：只有一行flex項目時，此屬性不起作用。

.container {align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

• flex-start：將行打包到容器的起始處
• flex-end：將行打包到容器的末端
• center：包裝在容器中心的線條
• space-between：線條均勻分布;?第一行是容器的開始，而最后一行是末尾
• space-around：在每條線周圍均勻分布均勻空間的線
• stretch?（默認）：線拉伸占據剩余空間

children的屬性
（彈性項目）

＃order

默認情況下，Flex項目按源代碼順序排列。但是，該order屬性控制它們出現在柔性容器中的順序。

.item {order: <integer>; /* default is 0 */ }

＃flex-grow

這定義了Flex項目在必要時增長的能力。它接受作為比例的無單位價值。它規定了該項目應該占用的柔性容器內的可用空間量。

如果所有項目都flex-grow設置為1，則容器中剩余的空間將平均分配給所有孩子。如果其中一個孩子的值為2，剩余空間將占用其他空間的兩倍（或至少會嘗試）。

.item {flex-grow: <number>; /* default 0 */ }

負數無效。

＃flex-shrink

這定義了Flex項目在必要時收縮的能力。

.item {flex-shrink: <number>; /* default 1 */ }

負數無效。

＃flex-basis

這將在分配剩余空間之前定義元素的默認大小。它可以是一個長度（例如20％，5rem等）或關鍵字。該auto關鍵字的意思是“看看我的寬度或高度屬性”（暫時由main-size關鍵字完成，直到棄用）。該content關鍵字的意思是“它根據項目的內容大小” -此關鍵字不能很好地支持呢，所以很難進行測試，并更難知道它的兄弟max-content，min-content和fit-content做。

.item {flex-basis: <length> | auto; /* default auto */ }

如果設置為0，則不會考慮內容的額外空間。如果設置為auto，多余空間將根據其flex-grow值分配。

＃flex

這是速記flex-grow,?flex-shrink和flex-basis組合。第二個和第三個參數（flex-shrink和flex-basis）是可選的。默認是0 1 auto。

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

建議您使用此速記屬性，而不是設置單個屬性。簡而言之，智能地設置其他值。

＃align-self

這允許align-items為各個彈性項目覆蓋默認對齊方式（或由其指定的對齊方式）。

請參閱align-items說明以了解可用值。

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch; }

請注意float，clear并且vertical-align對Flex項目沒有影響。（無效！！）

posted on 2018-05-30 20:12 一只奮斗的zhu 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/zhuzixi/p/9113071.html

總結

以上是生活随笔為你收集整理的CSS3弹性盒子Flex的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。