uni-app flex布局

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 个人暂时没理解

6.flex-grow  设置这个属性可以将元素按比例放大，默认是0

7.flex-shrink 设置这个属性可以将元素按比例缩小，默认是0

8.flex-basis 我感觉和width差不多

9.align-self 属性和algin-item是一样的，不过是基于align-item父级元素进行重写

转载于:https://www.cnblogs.com/getmn/p/11030956.html