CSS3在布局方面做了非常大的改進(jìn)，使得我們對(duì)塊級(jí)元素的布局排列變得十分靈活，適應(yīng)性非常強(qiáng)，其強(qiáng)大的伸縮性，在響應(yīng)式開(kāi)中可以發(fā)揮極大的作用。

主軸：Flex容器的主軸主要用來(lái)配置Flex項(xiàng)目，默認(rèn)是水平方向

側(cè)軸：與主軸垂直的軸稱作側(cè)軸，默認(rèn)是垂直方向的

方向：默認(rèn)主軸從左向右，側(cè)軸默認(rèn)從上到下

主軸和側(cè)軸并不是固定不變的，通過(guò)flex-direction可以互換。

Flex布局的語(yǔ)法規(guī)范經(jīng)過(guò)幾年發(fā)生了很大的變化，也給Flexbox的使用帶來(lái)一定的局限性，因?yàn)檎Z(yǔ)法規(guī)范版本眾多，瀏覽器支持不一致，致使Flexbox布局使用不多

2、各屬性詳解****

1.flex子項(xiàng)目在主軸的縮放比例，不指定flex屬性，則不參與伸縮分配

min-width 最小值 min-width: 280px 最小寬度 不能小于 280

max-width: 1280px 最大寬度 不能大于 1280

2.flex-direction調(diào)整主軸方向(默認(rèn)為水平方向)

flex-direction: column 垂直排列

flex-direction: row 水平排列

3、justify-content調(diào)整主軸對(duì)齊(水平對(duì)齊)

子盒子如何在父盒子里面水平對(duì)齊

值描述白話文

flex-start

默認(rèn)值。項(xiàng)目位于容器的開(kāi)頭。

讓子元素從父容器的開(kāi)頭開(kāi)始排序但是盒子順序不變

flex-end

項(xiàng)目位于容器的結(jié)尾。

讓子元素從父容器的后面開(kāi)始排序但是盒子順序不變

center

項(xiàng)目位于容器的中心。

讓子元素在父容器中間顯示

space-between

項(xiàng)目位于各行之間留有空白的容器內(nèi)。

左右的盒子貼近父盒子，中間的平均分布空白間距

space-around

項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)。

相當(dāng)于給每個(gè)盒子添加了左右margin外邊距

4、align-items調(diào)整側(cè)軸對(duì)齊(垂直對(duì)齊)

子盒子如何在父盒子里面垂直對(duì)齊(單行)

值描述白話文

stretch

默認(rèn)值。項(xiàng)目被拉伸以適應(yīng)容器。

讓子元素的高度拉伸適用父容器(子元素不給高度的前提下)

center

項(xiàng)目位于容器的中心。

垂直居中

flex-start

項(xiàng)目位于容器的開(kāi)頭。

垂直對(duì)齊開(kāi)始位置 上對(duì)齊

flex-end

項(xiàng)目位于容器的結(jié)尾。

垂直對(duì)齊結(jié)束位置 底對(duì)齊

5、flex-wrap控制是否換行

當(dāng)我們子盒子內(nèi)容寬度多于父盒子的時(shí)候如何處理

值描述

nowrap

默認(rèn)值。規(guī)定靈活的項(xiàng)目不拆行或不拆列。 不換行，則 收縮(壓縮) 顯示 強(qiáng)制一行內(nèi)顯示

wrap

規(guī)定靈活的項(xiàng)目在必要的時(shí)候拆行或拆列。

wrap-reverse

規(guī)定靈活的項(xiàng)目在必要的時(shí)候拆行或拆列，但是以相反的順序。

6、flex-flow是flex-direction、flex-wrap的簡(jiǎn)寫(xiě)形式

flex-flow: flex-direction ?flex-wrap;

白話記： flex-flow: 排列方向 換不換行;

兩個(gè)中間用空格

例如：

display: flex;

/* flex-direction: row;

flex-wrap: wrap; 這兩句話等價(jià)于下面的這句話*/

flex-flow: column wrap; /* 兩者的綜合 */

7、align-content堆棧(由flex-wrap產(chǎn)生的獨(dú)立行)多行垂直對(duì)齊方式齊

align-content是針對(duì)flex容器里面多軸(多行)的情況,align-items是針對(duì)一行的情況進(jìn)行排列。

必須對(duì)父元素設(shè)置自由盒屬性display:flex;，并且設(shè)置排列方式為橫向排列flex-direction:row;并且設(shè)置換行，flex-wrap:wrap;這樣這個(gè)屬性的設(shè)置才會(huì)起作用。

值描述測(cè)試

stretch

默認(rèn)值。項(xiàng)目被拉伸以適應(yīng)容器。

center

項(xiàng)目位于容器的中心。

flex-start

項(xiàng)目位于容器的開(kāi)頭。

flex-end

項(xiàng)目位于容器的結(jié)尾。

space-between

項(xiàng)目位于各行之間留有空白的容器內(nèi)。

space-around

項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)。

8、order控制子項(xiàng)目的排列順序，正序方式排序，從小到大

用css 來(lái)控制盒子的前后順序。 用order 就可以

用整數(shù)值來(lái)定義排列順序，數(shù)值小的排在前面。可以為負(fù)值。 默認(rèn)值是 0

order: 1;

此知識(shí)點(diǎn)重在理解，要明確找出主軸、側(cè)軸、方向，各屬性對(duì)應(yīng)的屬性值

總結(jié)

以上是生活随笔為你收集整理的css线条伸缩_伸缩布局(CSS3)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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