版權聲明：本文首發 http://asing1elife.com ，轉載請注明出處。 https://blog.csdn.net/asing1elife/article/details/82862174

Flex 是 Flexible Box 的縮寫，就是彈性布局，可以為盒子模型提供更大的靈活性
任何一個容器都可以指定為 Flex 布局，其將會成為未來布局的首選方案

更多精彩

• 更多技術博客，請移步 asing1elife’s blog

概念

采用 Flex 布局的元素稱為 Flex 容器

容器下的所有子元素自動成為容器成員，成為 Flex 項目

將元素的 display: flex 即可指定 Flex 容器

容器默認存在兩根軸，水平的主軸和垂直的交叉軸

屬性

flex-direction 決定主軸的方向，即項目的排列方向

• row [default] 主軸在水平方向，起點在左側
  
• row-reverse 主軸在水平方向，起點在右側
  
• column 主軸在垂直方向，起點在頂部
  
• column-reverse 主軸在垂直方向，起點在底部
  

flex-wrap 當一條軸線上無法排列所有子項，規定換行規則

• nowrap [default] 不換行
  
• wrap 換行，第一行在上方
  
• wrap-reverse 換行，第一行在下方
  

flex-flow 是 flex-direction 和 flex-wrap 的簡寫形式

• row wrap [default]

justify-content 定義項目在容器主軸上的對齊方式

• flex-start [default] 左對齊
  
• flex-end 右對齊
  
• center 居中
  
• space-between 兩端對齊，每個項目之間的間距相等
  
• space-around 每個項目兩側的間隔相等，即項目之間的間隔比項目與容器邊框的間隔大一倍
  

align-items 定義項目在容器交叉軸上的對齊方式

• stretch [default] 如何項目未設置高度，則每個項目默認占據整個容器高度
  
• flex-start 頂部
  
• flex-end 底部
  
• center 居中
  
• baseline 項目第一行文字的基線對齊
  

align-content 定義多條軸線的對齊方式，若容器只有一條軸線或容器沒有多余空間，則不起作用

• stretch [default] 項目占滿整個交叉軸
  
• flex-start 與交叉軸的頂部對齊
  
• flex-end 與交叉軸的底部對齊
  
• center 與交叉軸的中部對齊
  
• space-between 與交叉軸的兩端對齊，軸線之間的間隔平均分布
  
• space-around 每條軸線兩端的間隔相等，即軸線之間的間隔比軸線與邊框的間隔要大一倍
  

總結

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

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