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