欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

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

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

基本概念

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

• 容器：就是包含彈性項目的父元素。

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

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

.container {   display: flex; } 

一個例子

下面一個普通流布局的頁面。

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

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

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

div {   display: flex; } 

彈性盒子模型

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

當元素設置為 flex 時，它沿兩個軸來布局：

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

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

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

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

主要屬性

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

容器屬性

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

一個一個來看。

1.flex-direction：定義項目的排列方向。

• row（默認值）：從左到右排列。

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

• column：從上到下排列。

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

.container {   flex-direction: row; } 

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

• flex-start（默認值）：項目從主軸的起點開始。

• flex-end：項目從主軸的終點開始。

• center：項目在主軸上居中。

• space-between：項目之間的間隔相等。

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

.container {   justify-content: center; } 

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

• stretch（默認值）：項目拉伸以填充容器。

• flex-start：項目在交叉軸的起點對齊。

• flex-end：項目在交叉軸的終點對齊。

• center：項目在交叉軸上居中。

• baseline：項目的基線對齊。

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

項目屬性

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

1. flex-grow：定義項目的放大比例。

• 0（默認值）：項目不放大。

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

.item {   flex-grow: 1; } 

2.flex-shrink：定義項目的縮小比例。

• 1（默認值）：項目按比例縮小。

• 0：項目不縮小。

.item { flex-shrink: 0; } 

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

.item { flex-basis: 100px; } 

總結

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

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

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