flex-wrap屬性

布局的傳統解決方案，基于盒狀模型，依賴?display屬性 +?position屬性 +?float屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現。

ps:面試的時候也經常會問到一些

一、Flex布局是什么？

Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。

任何一個容器都可以指定為Flex布局。

.box{display: flex; }

行內元素也可以使用Flex布局。

.box{display: inline-flex; }

這里注意Webkit內核的瀏覽器，必須加上-webkit前綴。

.box{display: -webkit-flex; /* Safari */display: flex; }

注意，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。

二、基本概念

采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。

項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。

三、容器的屬性

真正實用的東西來了，學起來

?

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

flex-direction flex-wrap flex-flow justify-content align-items align-content

flex-direction屬性

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

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

flex-wrap屬性?

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

nowrap（默認）：不換行。

wrap：換行，第一行在上方。

?wrap-reverse：換行，第一行在下方。

還有一些，看看這個吧，懶得寫，哈哈哈哈哈

Flex 布局語法教程 | 菜鳥教程

總結

以上是生活随笔為你收集整理的Flex 布局语法教程的全部內容，希望文章能夠幫你解決所遇到的問題。

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