狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

今天我們來聊聊 CSS 里的彈性盒子（Flex Box）。

簡單來說，彈性盒子是一種布局模式，可以讓我們更輕松地排列和對齊網(wǎng)頁上的元素，尤其是在我們不知道元素具體大小或者它們會(huì)動(dòng)態(tài)變化的時(shí)候。

基本概念

彈性盒子布局主要由兩部分組成：容器（container）和項(xiàng)目（items）。

• 容器：就是包含彈性項(xiàng)目的父元素。

• 項(xiàng)目：是直接位于容器內(nèi)的子元素。

要使用彈性盒子布局，只需將容器的 display 屬性設(shè)置為 flex 或 inline-flex。

.container {   display: flex; } 

一個(gè)例子

下面一個(gè)普通流布局的頁面。

<div>   <p>     1. CSS 全稱 Cascading Style     Sheets，層疊樣式表。樣式表的作用，就像給房子裝修差不多，它就是為 HTML     頁面進(jìn)行裝修，讓它變得更好看。   </p>   <p>     2. 在學(xué)習(xí) CSS 之前，需要首先知道 HTML，如果你還不會(huì)的話，可以先去把 HTML21     天入門教程啃完。CSS 的學(xué)習(xí)，同樣需要大量的練習(xí)，而練習(xí)所使用的工具，和 HTML     的學(xué)習(xí)一致。   </p>   <p>     3. 這里需要說一下，學(xué)習(xí) CSS 和 HTML 略微不太一樣。之前在學(xué)習(xí) HTML     時(shí)，建議大家一定要多手寫，那是因?yàn)?nbsp;HTML     的標(biāo)簽就那么多，而且都不長，多寫寫基本上都能記住。   </p> </div> 

它在瀏覽器在呈現(xiàn)如下：

如果為容器 div 設(shè)置了 display 為 flex 的話，效果則如下：

div {   display: flex; } 

彈性盒子模型

借一張圖，說明一下彈性盒子模型

當(dāng)元素設(shè)置為 flex 時(shí)，它沿兩個(gè)軸來布局：

• 主軸（main axis）沿著 flex 元素放置的方向延伸的軸（比如頁面上的橫向的行、縱向的列）。該軸的開始和結(jié)束被稱為 main start 和 main end。

• 交叉軸（cross axis）是垂直于 flex 元素放置方向的軸。該軸的開始和結(jié)束被稱為 cross start 和 cross end。

理解模型的概念，就可以來看看具體的一些屬性了。

下面介紹的屬性，基本上圍繞上面的兩個(gè)軸來做文章，幫助我們實(shí)現(xiàn)現(xiàn)在布局可能。

主要屬性

前面說了彈性盒子布局主兩部分組成，下面也按這兩個(gè)部分分開說一個(gè)對應(yīng)的屬性。

容器屬性

容器可以為里面的項(xiàng)目定義排列方向、主軸上的對齊方式和交叉軸上的對齊方式。

一個(gè)一個(gè)來看。

1.flex-direction：定義項(xiàng)目的排列方向。

• row（默認(rèn)值）：從左到右排列。

• row-reverse：從右到左排列。

• column：從上到下排列。

• column-reverse：從下到上排列。

.container {   flex-direction: row; } 

2.justify-content：定義項(xiàng)目在主軸上的對齊方式。

• flex-start（默認(rèn)值）：項(xiàng)目從主軸的起點(diǎn)開始。

• flex-end：項(xiàng)目從主軸的終點(diǎn)開始。

• center：項(xiàng)目在主軸上居中。

• space-between：項(xiàng)目之間的間隔相等。

• space-around：項(xiàng)目之間的間隔相等，項(xiàng)目與邊框之間的間隔是項(xiàng)目之間間隔的一半。

.container {   justify-content: center; } 

3.align-items：定義項(xiàng)目在交叉軸上的對齊方式。

• stretch（默認(rèn)值）：項(xiàng)目拉伸以填充容器。

• flex-start：項(xiàng)目在交叉軸的起點(diǎn)對齊。

• flex-end：項(xiàng)目在交叉軸的終點(diǎn)對齊。

• center：項(xiàng)目在交叉軸上居中。

• baseline：項(xiàng)目的基線對齊。

.container {   align-items: flex-start; } 

項(xiàng)目屬性

項(xiàng)目屬性可以為項(xiàng)目定義放大比例、縮小比例及初始大小。

1. flex-grow：定義項(xiàng)目的放大比例。

• 0（默認(rèn)值）：項(xiàng)目不放大。

• 正整數(shù)：項(xiàng)目按比例放大。

.item {   flex-grow: 1; } 

2.flex-shrink：定義項(xiàng)目的縮小比例。

• 1（默認(rèn)值）：項(xiàng)目按比例縮小。

• 0：項(xiàng)目不縮小。

.item { flex-shrink: 0; } 

3.flex-basis：定義項(xiàng)目的初始大小。可以是長度值（如 20%、10rem）或 auto（默認(rèn)值）。

.item { flex-basis: 100px; } 

總結(jié)

• ?? 彈性盒子是一種布局模式，可以讓我們更輕松地排列和對齊網(wǎng)頁上的元素。

• ?? 彈性盒子布局主要由兩部分組成：容器（container）和項(xiàng)目（items）。

• ?? 容器屬性和項(xiàng)目屬性用于定義容器內(nèi)項(xiàng)目的排列方式及其它行為。