flex
2020-05-23 14:31:31 15 举报AI智能生成
flex
作者其他创作
大纲/内容
flexDirection
row: 从左向右依次排列
row-reverse: 从右向左依次排列
column(default): 默认的排列方式，从上向下排列
column-reverse: 从下向上排列
flexWrap
nowrap flex的元素只排列在一行上，可能导致溢出。
wrap flex的元素在一行排列不下时，就进行多行排列。
justifyContent
flex-start(default) 从行首开始排列。每行第一个弹性元
素与行首对齐，同时所有后续的弹性元素与前一个对齐。
素与行首对齐，同时所有后续的弹性元素与前一个对齐。
flex-end 从行尾开始排列。每行最后一个弹性元素与行尾对
齐，其他元素将与后一个对齐。
齐，其他元素将与后一个对齐。
center 伸缩元素向每行中点排列。每行第一个元素到行首的
距离将与每行最后一个元素到行尾的距离相同。
距离将与每行最后一个元素到行尾的距离相同。
space-between 在每行上均匀分配弹性元素。相邻元素间距离
相同。每行第一个元素与行首对齐，每行最后一个元素与行尾
对齐。
相同。每行第一个元素与行首对齐，每行最后一个元素与行尾
对齐。
space-around 在每行上均匀分配弹性元素。相邻元素间距离相同。
每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将
会是相邻元素之间距离的一半。
每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将
会是相邻元素之间距离的一半。
alignItems
flex-start 元素向侧轴起点对齐。
flex-end 元素向侧轴终点对齐。
center 元素在侧轴居中。如果元素
在侧轴上的高度高于其容器，那么在
两个方向上溢出距离相同。
在侧轴上的高度高于其容器，那么在
两个方向上溢出距离相同。
stretch 弹性元素被在侧轴方向被拉伸到
与容器相同的高度或宽度。
与容器相同的高度或宽度。
alignSelf
auto(default) 元素继承了它的父容器的
align-items 属性。如果没有父容器则为
“stretch”。
align-items 属性。如果没有父容器则为
“stretch”。
stretch 元素被拉伸以适应容器。
center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。
flex
属性定义了一个可伸缩元素的能力，默认为0
0 条评论
下一页
