请选择 进入手机版 | 继续访问电脑版

Flex布局--子项常见属性

[复制链接]
来自北方 发表于 2021-1-1 18:34:31 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
1、flex:子项目占的份数

界说子项目分配剩余空间,默认值为0
  1.                
  2.                
  3.                
复制代码
  1. section{                width: 60%;                height: 150px;                background-color: pink;                margin: 0 auto;                display: flex;        }section .item1{                width: 100px;                height: 100px;                background-color: orange;   }section .item2{                flex: 1;                background-color: reenyellow;  }section .item3{                width: 100px;                height: 100px;                background-color: plum;  }
复制代码
效果如图

这也称为圣杯结构。
2、align-self:控制子项自己在侧轴上的分列方式

可覆盖align-items属性。
默认值为auto,体现继承父元素的align-items属性.
如果没有父元素,则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
  1. align-self: flex-end;
复制代码

3、order:界说项目标分列顺序。数值越小,分列越靠前,默认为0。
  1. order: -1;
复制代码


来源:https://blog.csdn.net/hanrabbit/article/details/111991869
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )