uni app flex布局全解

2021-10-19 11:39:46 字數 1178 閱讀 7919

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快充協議,還有它的規則,只...