flexbox伸縮布局盒-HappyForEverIsaDream

Flexbox 由 伸縮容器 和 伸縮項目 組成。通過設置元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器

設置為flex的容器被渲染為一個塊級元素，而設置為inline-flex的容器則渲染為一個行內元素。

例如：此處將 類名為 flex-container 的元素設置為伸縮容器

伸縮容器中的每一個子元素都是一個伸縮項目。伸縮項目可以是任意數量的。伸縮容器外和伸縮項目內的一切元素都不受影響。

簡單地說，Flexbox 定義了伸縮容器內伸縮項目該如何布局。

Flex Lines 伸縮行

伸縮項目沿著伸縮容器內的一個 伸縮行 定位。通常每個伸縮容器只有一個伸縮行。 默認伸縮行從左往右

例子：

 1 
 2 flex item 1
 3 flex item 2
 4 
 5 
 6 樣式：
 7 
 8 .flex-container {
 9 display: -webkit-flex;
10 display: flex;
11 width: 300px;
12 height: 240px;
13 background-color: Silver;
14 }
15 
16 .flex-item {
17 background-color: DeepSkyBlue;
18 width: 100px;
19 height: 100px;
20 margin: 5px;
21 }

效果圖：

再加

flex item 3

flex item 4
伸縮項目的寬度超過了 伸縮容器的寬度，伸縮容器的寬度不會改變，伸縮項目的寬度減小

 1 
 2 flex item 1
 3 flex item 2
 4 
 5 
 6 
 7 CSS樣式
 8 .flex-container {
 9 direction: rtl;
10 display: -webkit-flex;
11 display: flex;
12 width: 300px;
13 height: 240px;
14 background-color: Silver;
15 
16 }
17 
18 .flex-item {
19 background-color: DeepSkyBlue;
20 width: 100px;
21 height: 100px;
22 margin: 5px;
23 }

效果：

伸縮行從右往左，文字也從右往左

為了描述抽象的書寫模式，Flexbox 使用 主軸 和 側軸的概念。伸縮行跟隨主軸。側軸則垂直于主軸。

flex-direction 伸縮流的方向

默認值 row

再次提醒，默認是從左至右，從上到下。其他的值如下：

justify-content 主軸對齊

用于調整主軸上伸縮項目的位置?？赡艿闹禐椋?/p>

align-items 側軸對齊

調整伸縮項目在側軸上的定位方式?？赡艿闹涤校?/p>

flex-wrap 伸縮行換行

為伸縮容器創建多個伸縮行。這個屬性接受以下值：

align-content 堆棧伸縮行

它對齊的是伸縮行，它接受的值：

flex-flow 伸縮方向與換行 是flex-direction和flex-wrap的縮寫。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com