首先我們了解一下折行
flex-wrap：nowrap（預設）不折行，元素在同一行內顯示
warp;折行
warp-reverse；會改變交叉軸方向後換行
注意第乙個盒子的位置
我們使用移動端布局來檢視，對於彈性盒，設定中pc和移動端效果相差不大
對於彈性容器而言，我們改變的是內部直接子元素的布局，參考主軸、交叉軸。我們可以變換主軸的位置，而若使用flex-direction：row-reverse；賦予彈性容器，此時我們的主軸變為豎向
不進行折行，元素縮小，因為我們設定background-clip: content-box;故背景填充區域為內容，設定padding（內邊距）之後會出現空白
預設
豎向
我們也可以變換主軸的指向，即此時我們變換了主軸的起始點，這將會影響元素的排列。當然我們也可以設定將主軸指向變換
附上原始碼
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
flexbox<
/title>
<
/head>
* body>div
div>div
div div:nth-
child(1
) div div:nth-
child(2
) div div:nth-
child(3
) div div:nth-
child(4
) div div:nth-
child(5
)<
/style>
第乙個<
/div>
第二個<
/div>
第三個<
/div>
第四個<
/div>
第五個<
/div>
<
/div>
<
/body>
<
/html>注意：注釋部分是為除錯
對於單個元素而言，我們可以設定order:；來給改變排列順序，值越大排列順序越低
css 彈性盒模型
彈性盒模型flexbox 彈性盒模型是c3的一種新的布局模式 它是指一種當頁面需要適應不同螢幕大小以及裝置型別時，確保元素有恰當行為的布局方式。引入彈性盒模型布局的目的是提供一種更有效的方法來對乙個容器中的子元素進行排列 對齊和分配空白空間。相容性ie11 彈性盒模型內容 彈性盒模型由彈性容器 fl...
學習CSS盒模型和CSS3彈性盒模型
css盒模型本質是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。div300px 寬 50px 左 右填充 50px 左 右邊框 50px 左 右邊距 450px 最終元素的總寬度計算公式是這樣的 總元素的寬度 寬度...
Web前端學習筆記 彈性盒
flex 彈性盒 伸縮盒 是css中的又一種布局手段，它主要用來代替浮動來完成頁面的布局 flex可以使元素具有彈性，讓元素可以跟隨頁面的大小的改變而改變。彈性容器 要使用彈性盒，必須先將乙個元素設定為彈性容器，我們通過display來設定彈性容器 display flex 設定為塊級彈性容器 di...