flex是flexible box的縮寫,意為」彈性布局」,用來為盒狀模型提供最大的靈活性
設定flex布局也很簡單直接css中,設定它的display:flex
1.flex-direction
容器內元素排列方向
row :從左至右
row-reverse :從右至左
column:從上到下
column-reverse:從下到上
2.flex-wrap
:容器內的元素換行
nowrap 不換行
wrap 換行
wrap-reverse 反向換行
3.justify-content
容器內元素在主軸的對齊方式
flex-start 左對齊
flex-end 右對齊
center 居中對齊
space-between 等距對齊(兩端對齊,空白分配在元素中間)
space-around 效果同上,但是兩邊留白
4.align-items
定義容器內元素在縱軸上,如何排列以及處理空白部分
stretch 如果容器內元素未設定高度,則預設元素高度為容器高度
flex-start 容器的縱軸上部對齊
flex-end 容器的縱軸下部對齊
center 在容器的縱軸中部對齊
baseline 如果容器中的元素中有文字,則按文字底部對齊
5.align-content
個人暫時沒理解
上下居中:
class="align-center"
6.flex-grow
設定這個屬性可以將元素按比例放大,預設是0
7.flex-shrink
設定這個屬性可以將元素按比例縮小,預設是0
8.flex-basis
我感覺和width差不多
9.align-self
屬性和algin-item
是一樣的,不過是基於align-item
父級元素進行重寫
Flex 布局全解
flex是flexible box的縮寫,意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器,必須加上 webkit字首。box注意,設為flex布局以後,子元素的float clear和vert...
flex布局全解(一看就懂)
對flex container的設定 flex direction 設定flex items的排序方向 當flex direction row main axis 主軸 是row,cross axis 交叉軸 是column 當flex direction column main axis 主軸 是...
PD3 0詳解 電源規則,全解!!!全解!!!
大師匈今天談一下pd3.0的電源規則,pd3.0標準標定的規則。usb協會聲稱,為了世界和平世界環境,讓大家用上統一標準的充電器,不用再為每乙個用電裝置都配乙個專門的充電器,這些充電器各種各樣的都有,所以有時候大師匈也很煩!那麼為了維護世界和平,usb協議呢就制訂了這個pd快充協議,還有它的規則,只...