微信小程式布局屬性

2021-09-24 11:05:01 字數 2406 閱讀 6143

flex是一種靈活的布局模型

在不固定高度資訊的例子中，我們只需要在容器中設定一下兩個屬性即可實現不確定下的垂直居中

.container
flex不單是乙個屬性，它包含了一套新的屬性集。屬性集包括用於設定容器，和用於設定專案兩部分。

設定容器的屬性有：

display:flex;


flex-direction:row（預設值） | row-reverse | column |column-reverse


flex-wrap:nowrap（預設值） | wrap | wrap-reverse


justify-content:flex-start（預設值） | flex-end | center |space-between | space-around | space-evenly


align-items:stretch（預設值） | center | flex-end | baseline | flex-start


align-content:stretch（預設值） | flex-start | center |flex-end | space-between | space-around | space-evenly
設定專案的屬性有 

order:0（預設值） | flex-shrink:1（預設值） | flex-grow:0（預設值） | flex-basis:auto（預設值） | flex:none | auto | @flex-grow @flex-shrink @flex-basis


align-self:auto（預設值） | flex-start | flex-end |center | baseline| stretch
容器屬性

通過設定座標軸，來設定專案排列方向

.container
row（預設值）：主軸橫向，方向為從左指向右。專案沿主軸排列，從左到右排列。

row-reverse：row的反方向。主軸橫向，方向為從右指向左。專案沿主軸排列，從右到左排列。

column：主軸縱向，方向從上指向下。專案沿主軸排列，從上到下排列。

column-reverse：column的反方向。主軸縱向，方向從下指向上。專案沿主軸排列，從下到上排列。

設定是否允許專案多行排列，以及多行排列時換行的方向

.container
nowrap（預設值）：不換行。如果單行內容過多，則溢位容器。

wrap：容器單行容不下所有專案時，換行排列。

wrap-reverse：容器單行容不下所有專案時，換行排列。換行方向為wrap時的反方向。

設定專案在主軸方向上對齊方式，以及 分配專案之間及其周圍多餘的空間

.container
flex-start（預設值）：專案對齊主軸起點，專案間不留空隙。

center：專案在主軸上居中排列，專案間不留空隙。主軸上第乙個專案離主軸起點距離等於最後乙個專案離主軸終點距離。

flex-end：專案對齊主軸終點，專案間不留空隙。

space-between：專案間間距相等，第乙個專案離主軸起點和最後乙個專案離主軸終點距離為0。

space-around：與space-between相似。不同點為，第乙個專案離主軸起點和最後乙個專案離主軸終點距離為中間專案間間距的一半。

space-evenly：專案間間距、第乙個專案離主軸起點和最後乙個專案離主軸終點距離等於專案間間距。

設定專案在行中的對齊方式

.container
stretch（預設值）：專案拉伸至填滿行高。

flex-start：專案頂部與行起點對齊。

center：專案在行中居中對齊。

flex-end：專案底部與行終點對齊。

baseline：專案的第一行文字的基線對齊。。

多行排列時，設定在交叉軸方向上的對齊方式，以及分配行之間及其周圍多餘的空間

.container
stretch（預設值）：當未設定專案尺寸，將各行中的專案拉伸至填滿交叉軸。當設定了專案尺寸，專案尺寸不變，專案行拉伸至填滿交叉軸。

flex-start：首行在交叉軸起點開始排列，行間不留間距。

center：行在交叉軸中點排列，行間不留間距，首行離交叉軸起點和尾行離交叉軸終點距離相等。

flex-end：尾行在交叉軸終點開始排列，行間不留間距。

space-between：行與行間距相等，首行離交叉軸起點和尾行離交叉軸終點距離為0。

space-around：行與行間距相等，首行離交叉軸起點和尾行離交叉軸終點距離為行與行間間距的一半。

space-evenly：行間間距、以及首行離交叉軸起點和尾行離交叉軸終點距離相等。

微信小程式 flex布局屬性

flex direction 主軸方向 row 橫向 row reverse 橫向倒序 column 縱向 column reverse 縱向倒序 flex wrap 元素排列換行 nowrap 不換行自動按比例壓縮 wrap 換行超出元素在下方 wrap reverse 換行超出元素在上方 fle...

微信小程式（Flex布局 專案屬性）

專案屬性 設定容器內專案相關樣式，用於設定專案的尺寸 位置，以及對專案的對齊方式做特殊設定。專案元素屬性集合 order flex grow flex shrink flex basis flex align self 專案屬性 沿主軸方向上的排列順序order 0 預設值 在這個例子中，專案溢位 ...

微信小程式 布局

傳送門 傳送門 語法 margin auto length 引數 margin 10px 11px 9px 8px 按順序分別代表物件與父容器的上 右 下 左的距離值為10px,11px,9px,8px。auto 值被設定為相對邊的值 length 由浮點數字和單位識別符號組成的長度值 百分數。百分...