flex布局常用到的屬性

2022-06-21 16:30:13 字數 705 閱讀 5391

阮一峰有一篇flex教程很全面:

這裡主要記錄一下需要用到而不常用的知識點:

1.flex-grow屬性

定義專案的放大比例,預設為0,即如果存在剩餘空間,也不放大。

如果所有專案的flex-grow屬性都為1,則它們將等分剩餘空間(如果有的話)。

如果乙個專案的flex-grow屬性為2,其他專案都為1,則前者佔據的剩餘空間將比其他項多一倍。

2.flex-shrink屬性

定義了專案的縮小比例,預設為1,即如果空間不足,該專案將縮小。

如果所有專案的flex-shrink屬性都為1,當空間不足時,都將等比例縮小。

如果乙個專案的flex-shrink屬性為0,其他專案都為1,則空間不足時,前者不縮小。

3.align-self屬性

align-self屬性允許單個專案有與其他專案不一樣的對齊方式,可覆蓋align-items屬性。

預設值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch

CSS布局flex布局常用屬性

display flex使用flex布局首先要設定父容器 水平方向 justify content flex start 起始端對齊 justify content flex end 末尾段對齊 justify content center 居中對齊 justify content space ar...

常用開發布局之flex布局 常用屬性

在之前我也寫過一篇flex布局的一篇文章,flex新增屬性。可以看下,剛開始第一次接觸flex布局時寫的,現在看看感覺有一點籠統,不是很清晰。但是裡面解釋了很多基礎知識,還是值得看的。今天再來縷縷常用的父項屬性和子項屬性。上來,裡面有詳細的解釋 flex deriction 控制主軸的正方向 row...

Flex布局常用屬性簡單總結

常用布局方式也就是float,但flex布局更適合移動端專案開發 參考flex布局 1,布局方式 display flex display webkit flex safari a.橫向縱向布局 flex direction row column row reverse row reverse b....