row表示按行顯示,wrap設置當父元素過小時是否換行。
注意flex-flow是flex-direction和flex-wrap兩個屬性合在一起定義了,分開設定也可以。
flex-direction的屬性:
row:行顯示;column:列顯示;row-reverse/column-reverse:反方向進行顯示
3、align-item屬性:
flex-start:使得每個div的頭部對齊
flex-end:使得每個div的尾部對齊
center:以中心線為基準對齊
stretch:填滿整個區域,即頭部、尾部均對齊
4、justify-content屬性
用于設置留白的形式,在制作一行中有多個部分的時候非常方便。
比如父div中有三個小的div并排顯示,但是它們的總寬度小于父div的總寬度,則可以使用這種方法進行布局,具體參數如下:
flex-start:留白部分在最末端
flex-end:留白部分在最起始的地方
以上兩種留白方式都是把三個小div看成一個整體,留白留在一端
space-between:中間均分留白
space-around:中間+兩側均分留白
以上兩種相當于把三個div塊拆開均分在父div中,二者的差別僅僅在于是不是在兩側也留白
附:利用justify-content的方式使元素垂直水平居中的方式
新聞熱點
疑難解答