flex 用法：

• flex 可以在瀏覽器里點(diǎn)擊就有~

• 設(shè)置了 display: flex 的父元素被稱之為 flex 容器（flex container），它的子元素都會以 flex 布局。

• flex-direction: column; 豎直排列

• flex-wrap: wrap; 換行

• flex: 1; 用于設(shè)置動態(tài)尺寸，表示占比，和 grid-template-columns 類似，只不過需要去一個(gè)個(gè)設(shè)置（這就體現(xiàn)出 grid 的優(yōu)越性了不是？）

• 水平和垂直對齊：

  • align-items 控制 flex 項(xiàng)在交叉軸上的位置。
  • 默認(rèn)的值是 stretch，其會使所有 flex 項(xiàng)沿著交叉軸的方向拉伸以填充父容器。如果父容器在交叉軸方向上沒有固定寬度（即高度），則所有 flex 項(xiàng)將變得與最長的 flex 項(xiàng)一樣長（即高度保持一致）。
  • center 值會使這些項(xiàng)保持其原有的高度，但是會在交叉軸居中。
  • 你也可以設(shè)置諸如 flex-start 或 flex-end 這樣使 flex 項(xiàng)在交叉軸的開始或結(jié)束處對齊所有的值。
    justify-content 控制 flex 項(xiàng)在主軸上的位置。
  • 默認(rèn)值是 flex-start，這會使所有 flex 項(xiàng)都位于主軸的開始處。
  • 你也可以用 flex-end 來讓 flex 項(xiàng)到結(jié)尾處。
  • center 在 justify-content 里也是可用的，可以讓 flex 項(xiàng)在主軸居中。
  • space-around 是很有用的——它會使所有 flex 項(xiàng)沿著主軸均勻地分布，在任意一端都會留有一點(diǎn)空間。
  • 還有一個(gè)值是 space-between，它和 space-around 非常相似，只是它不會在兩端留下任何空間。

總結(jié)

以上是生活随笔為你收集整理的CSS flex 用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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