3.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

• 当父元素设置display:flex后，子元素会自动布局并适应宽度，但里面的文本文字超出边界却无法自动换行

只需要给子元素加一个css属性:    overflow-wrap:break-word；即可正常自动换行

• 当左边元素固定宽高，中间元素flex=1，右侧元素固定宽高，当中间元素为超长文本，会发现右侧元素不显示

flex: 1;
overflow: hidden;

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

小案例.png

• 超出部分显示省略号

display:-webkit-box;  
-webkit-box-orient:vertical;  
-webkit-line-clamp:2;  
overflow:hidden;

// 添加行高，防止超出的文字露出
line-height: 50rpx;