CSS:flex彈性佈局

flex簡介

在這裏插入圖片描述

常用參數

在這裏插入圖片描述

flex-direction
flex-direction用來控制子項整體佈局方向,是從左往右還是從右往左,是從上往下還是從下往上。
在這裏插入圖片描述

flex-wrap
flex-wrap用來控制子項整體單行顯示還是換行顯示
在這裏插入圖片描述

flex-flow
flex-flow 屬性是flex-direction和flex-wrap的縮寫(結合),表示flex佈局的flow流動特性。第一個值表示方向,第二個值表示換行,中間用空格隔開。

justify-content
justify-content屬性決定了主軸方向(flex-direction方向)上子項的對齊和分佈方式。
在這裏插入圖片描述
align-items
align-items中的items指的就是flex子項們,因此align-items指的就是flex子項們相對於flex容器在側軸方向上的對齊方式。

在這裏插入圖片描述

align-content
align-content可以看成和justify-content是相似且對立的屬性,如果所有flex子項只有一行,則align-content屬性是沒有任何效果的。參數於align-items一致。

作用在flex子項上的css屬性
在這裏插入圖片描述

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章