三、flex布局（彈性布局）

“彈性布局”，用來為盒裝模型提供最大的靈活性。采用Flex布局的元素，稱為Flex容器（flex container），簡稱“容器”。它的所有子元素自動成為容器成員，成為flex項目（flex item），簡稱“項目”。

任何一個容器都可以指定為Flex 布局
行內元素也可以使用Flex布局。
注：設為flex布局以后，子元素的float、clear和vertical-align屬性將失效

3.1 以下6個屬性設置在容器上。

• flex-direction 主軸方向（項目排列方向）
• flex-wrap 換行方式
• flex-flow 主軸方向與換行方式的簡寫
• justify-content 項目在主軸方向的對齊方式
• align-items 交叉軸的對齊方式
• align-content 多根軸線的對其方式
  注：5 and 6 不是常用屬性，本文不予說明

3.2 以下6個屬性設置在項目上。

• order 項目的排列順序
• flex-grow 項目的放大比例
• flex-shrink 項目的縮小比例
• flex-basis 項目的本來大小
• flex 放大、縮小、原本大小的簡寫
• align-self 對單個項目設置對齊方式

看到這里是不是暈乎乎的，別著急，上面那么多的意思也就是說，我們可以在父容器的CSS中設置display:flex;即可將此父元素轉為flex容器，注意，此時父元素被稱之為容器，那么這個父元素下的所有子元素都自動的變?yōu)轫椖?#xff0c;即原父元素下的子元素變?yōu)槿萜骼锏捻椖俊?/p>

接下來對每個屬性進行解釋
3.1.x是容器上的屬性
3.2.x是項目上的屬性

3.1.1 flex-ddirection 主軸方向

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

• column-reverse：主軸為垂直方向，起點在下沿
• column：主軸為垂直方向，起點在上沿。
• row（默認值）：主軸為水平方向，起點在左端。
• row-reverse：主軸為水平方向，起點在右端。

3.1.2 flex-wrap 換行

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

它可能取三個值。

（1）nowrap（默認）：不換行。

（2）wrap：換行，第一行在上方。

（3）wrap-reverse：換行，第一行在下方。

3.1.3 flex-flow 主軸方向換行縮寫

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

.box {flex-flow: <flex-direction> <flex-wrap>; }

3.1.4 justify-content 對齊方式

justify-content屬性定義了項目在主軸上的對齊方式。

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

可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右。

• flex-start（默認值）：左對齊
• flex-end：右對齊
• center： 居中
• space-between：兩端對齊，項目之間的間隔都相等。
• space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

3.2.1 order 排列順序

rder屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認為0。

.item {order: <integer>; }

3.2.2 flex-grow 放大比例

flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。

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

如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據(jù)的剩余空間將比其他項多一倍。

3.2.3 flex-shrink屬性

flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

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

如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

負值對該屬性無效。

3.2.4 flex-basis屬性

flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。

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

它可以設為跟width或height屬性一樣的值（比如350px），則項目將占據(jù)固定空間。

3.2.5 flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。

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

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建議優(yōu)先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。

3.2.6 align-self屬性

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

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

該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。

四、table表格布局

表格布局通常用于web表格制作、信息匯總、個人簡歷等
基礎格式如下：

<table><th>這是加粗顯示的，可用于標題等</th><tr><td><td></tr> </table>

table表示一個表格
table下還可以有tbody，也是雙標簽，表示表格里的內容，這個標簽，我覺得可有可無
tr標簽表示一行
td標簽表示一個單元格

所以使用方式就是先寫一個table，然后如果有加粗顯示的就用th，否則就寫tr表示一行，在tr一行中寫幾個td就代表幾個單元格，給人的感覺就是一列一列的。

在表格中有可能會有合并行列的情況，比如之前我寫的一個計算器的小案例，就需要在‘0’和‘=’這兩個位置跨行、跨列顯示

跨行：<td rowspan="2">=</td> 如果需要跨多行，可以改數(shù)字
跨列：<td colspan="2">0</td> 跨列同理

五、網(wǎng)格布局

由于博主不常用網(wǎng)格布局，且網(wǎng)格布局應用較少，所以沒有深入研究，小伙伴們可以參考這篇博文——五分鐘掌握網(wǎng)格布局（grid）常用屬性
以上內容有部分來源于網(wǎng)上搜到的博客，如有不妥或侵權之處，望告知刪除

總結

以上是生活随笔為你收集整理的HTML的五种经典布局方式（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

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