uni-app flex布局全解
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性设置Flex布局也很简单直接css中,设置它的 display:flex1.flex-direction容器内元素排列方向row :从左至右row-reverse :从右至左column:从上到下column-reverse:从下到上2.flex-wrap:容器内的元素换行nowrap 不换行wrap
·
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
父级元素进行重写
更多推荐
已为社区贡献1条内容
所有评论(0)