flex布局属性
  0OqiXumCXUqT 2023年11月19日 28 0

flex-direction 属性定义容器在哪个方向上堆叠
row 水平方向,从左到右(默认)
row-reverse 水平方向(从右到左)
column 垂直方向(从上到下)
column-reverse 垂直方向(从下到上)

flex-wrap属性定义是否换行
nowrap不换行(默认)
wrap-revevrse 以相反的顺序换行
wrap换行

justify-content 属性用于水平方向对齐方式
flex-start 容器开头对齐(默认)
center 水平居中
flex-end 在容器末端对齐
space-around 每个item 左右方向的margin相等。两个item中间的间距会比较大
space-between 最左、最右item贴合左侧或右侧边框,item与item之间间距相等

align-items属性用于垂直对齐flex
center 垂直方向居中对齐
flex-start 将flex在容器顶部对齐
flex-end 在容器底部对齐
stretch 拉伸flex填充容器
baseline 使flex基线对齐

align-content属性用于对齐弹性线
stretch 值拉伸弹性线以占据剩余空间(默认)
space- between 值显示的弹性之间有相等的间距
space-around 值显示弹性在其之前,之间和之后带有空格
center 值在容器中间显示弹性线
flex-start 值在容器开头显示弹性线
flex-end 值在容器的末尾显示弹性线

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月19日 0

暂无评论

推荐阅读
  WYub0BgMG5Ci   2023年12月23日   28   0   0 flex布局flex布局
0OqiXumCXUqT