flex布局中的一些基本概念

容器和項目

什么叫容器
采用flex布局的元素被稱作容器。

什么叫項目
在flex布局中的子元素被稱作項目。

即父級元素采用flex布局，則父級元素為容器，全部子元素自動成為項目

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

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

容器的一些屬性

有六個常用屬性設置在容器上，分別為：

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

flex-direction 屬性

flex-direction 屬性設置容器主軸的方向

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

?

包含四個屬性值：

row: 默認值，表示沿水平方向，由左到右。

row-reverse ：表示沿水平方向，由右到左

column：表示垂直方向，由上到下

column-reverse:表示垂直方向，由下到上

?

---

.m-tree-end-node{display: flex;align-items: center;justify-content: center;height: 100%;}

.m-node{display: flex;align-items: center;justify-content: center;height: 200px;border:1px solid #ddd}

總結

以上是生活随笔為你收集整理的display:flex如何设置内容水平垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

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