Flex 布局
2020-06-04 13:02:41 13 举报AI智能生成
Flex 布局
作者其他创作
大纲/内容
注意
失效
float
clear
vertical-align
指定为Flex布局
容器
行内元素
webkit内核
Flex容器
水平轴(main axis)
main start
Flex 项目
main size
main end
交叉轴(cross axis)
cross start
Flex 项目
corss size
cross end
容器的属性
flex-flow
主轴排列方向
flex-direction
row
main 轴为水平方向,起点在左端
row-reverse
main 轴为水平方向.起点在右端
column
main 轴为垂直方向,起点在上端
column-reverse
main 轴为垂直方向,起点在下端
轴换行
flex-wrap
nowrap
不换行
wrap
换行,第一行在上方
wrap-reverse
换行,第一行在下方
justify-content
flex-start
左对齐
flex-end
右对齐
center
居中
space-between
两端对齐
space-around
项目两侧间隔相等
align-items
flex-start
顶端对齐
flex-end
底部对齐
center
居中
baseline
文字底线对齐
stretch
占满高度(未设置高度或auto)
align-content
flex-start
顶端对齐
flex-end
底部对齐
center
居中
space-between
两端对齐
space-around
轴线两侧间隔相等
stretch
占满高度(交叉轴)
项目的属性
排列顺序
order
Int
数字越小越靠前
0
flex
放大比例
flex-grow
int
所有项目都为1
等分剩余空间
1个为2,其他为1
2的占据剩余空间比其他多1倍
0
存在剩余空间也不放大
缩小比例
flex-shrink
int
所有项目为1
当空间不足时，所有项目等比例缩小
1个为0,其他为1
空间不足时，0不缩小，其他缩小
1
当空间不足时，该项目缩小
占据主轴空间
flex-basis
auto
项目本来的大小
length
可设置大小 350px 项目将占据固定的350px
单个项目属性值
align-self
auto
继承父元素的属性值
没有父元素==stretch
其他
auto
none
默认值
0 条评论
下一页
