三、flex布局（彈性布局）

“彈性布局”，用來(lái)為盒裝模型提供最大的靈活性。采用Flex布局的元素，稱為Flex容器（flex container），簡(jiǎn)稱“容器”。它的所有子元素自動(dòng)成為容器成員，成為flex項(xiàng)目（flex item），簡(jiǎn)稱“項(xiàng)目”。

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

3.1 以下6個(gè)屬性設(shè)置在容器上。

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

3.2 以下6個(gè)屬性設(shè)置在項(xiàng)目上。

• order 項(xiàng)目的排列順序
• flex-grow 項(xiàng)目的放大比例
• flex-shrink 項(xiàng)目的縮小比例
• flex-basis 項(xiàng)目的本來(lái)大小
• flex 放大、縮小、原本大小的簡(jiǎn)寫
• align-self 對(duì)單個(gè)項(xiàng)目設(shè)置對(duì)齊方式

看到這里是不是暈乎乎的，別著急，上面那么多的意思也就是說(shuō)，我們可以在父容器的CSS中設(shè)置display:flex;即可將此父元素轉(zhuǎn)為flex容器，注意，此時(shí)父元素被稱之為容器，那么這個(gè)父元素下的所有子元素都自動(dòng)的變?yōu)轫?xiàng)目，即原父元素下的子元素變?yōu)槿萜骼锏捻?xiàng)目。

接下來(lái)對(duì)每個(gè)屬性進(jìn)行解釋
3.1.x是容器上的屬性
3.2.x是項(xiàng)目上的屬性

3.1.1 flex-ddirection 主軸方向

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

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

3.1.2 flex-wrap 換行

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

它可能取三個(gè)值。

（1）nowrap（默認(rèn)）：不換行。

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

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

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

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap。

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

3.1.4 justify-content 對(duì)齊方式

justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。

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

可能取5個(gè)值，具體對(duì)齊方式與軸的方向有關(guān)。下面假設(shè)主軸為從左到右。

• flex-start（默認(rèn)值）：左對(duì)齊
• flex-end：右對(duì)齊
• center： 居中
• space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。
• space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

3.2.1 order 排列順序

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

.item {order: <integer>; }

3.2.2 flex-grow 放大比例

flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。

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

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

3.2.3 flex-shrink屬性

flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。

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

如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。

負(fù)值對(duì)該屬性無(wú)效。

3.2.4 flex-basis屬性

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

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

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

3.2.5 flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。

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

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

建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)寫三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值。

3.2.6 align-self屬性

align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。

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

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

四、table表格布局

表格布局通常用于web表格制作、信息匯總、個(gè)人簡(jiǎn)歷等
基礎(chǔ)格式如下：

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

table表示一個(gè)表格
table下還可以有tbody，也是雙標(biāo)簽，表示表格里的內(nèi)容，這個(gè)標(biāo)簽，我覺(jué)得可有可無(wú)
tr標(biāo)簽表示一行
td標(biāo)簽表示一個(gè)單元格

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

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

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

五、網(wǎng)格布局

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

總結(jié)

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

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