2.uni-app布局（flex布局之常用属性）

• 如何使用flex布局

// 容器 使用属性
display: flex;

• flex容器的属性

1.flex-direction主轴的方向(子元素排列方式）
①row（默认值）：主轴为水平方向，起点在左端(左到右的排列方式)

row.png

②column：主轴为垂直方向，起点在上沿(上到下的排列方式)

column.png

2.justify-content主轴元素的排列对齐方式
①flex-start(默认值) 1)如果是flex-direction：row左对齐 2)如果是flex-direction：column上对齐

②flex-end 1)如果是flex-direction：row右对齐 2)如果是flex-direction：column下对齐

flex-end -row.png
flex-direction-direction：column.png

③center 1)如果是flex-direction：row水平居中 2)如果是flex-direction：column垂直居中

center-row.png
center-column.png

④space-between 1)如果是flex-direction：row水平两端对齐 2)如果是flex-direction：column垂直两端对齐

space-between-row.png
space-between-column.png

⑤space-around 1)如果是flex-direction：row水平方向子元素两侧的间隔相等 2)如果是flex-direction：column垂直方向子元素两侧的间隔相等

space-around-row.png

space-around-column.png

3.align-items交叉轴元素的排列对齐方式

flex-direction：row
①flex-start(默认值) 垂直方向上对齐

垂直方向上对齐.png
②flex-end 垂直方向下对齐
垂直方向下对齐.png
③ center 垂直方向居中对齐
垂直方向居中对齐.png

flex-direction：column
①flex-start(默认值) 横向左对齐

横向左对齐.png
②flex-end 横向右对齐
横向右对齐.png
③ center 横向居中对齐
横向居中对齐.png

• flex容器的子元素属性

flex子元素占据剩余空间的比例(与andorid的weight属性类型)

①平分

1:1.png

②剩余空间的1比例（示例为占据400rpx的宽度）

占据全部剩余空间.png

• 小案例（上部分可滚动，底部固定）

小案例.png