前提:父容器设置了display:flex 或 inline-flex
order 项目的排列顺序
默认是0,数字越小,排在越前面
<!DOCTYPE html> <html lang="en"head> meta charset="UTF-8"name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"title>Document</link rel="stylesheet" href="font/iconfont.css"style> *{margin:0;paddingbox-sizingborder-box} .childwidth100pxheightbackgroundorangeborder1px solid #3332px .parent#abcdefdisplay flexflex-wrapwrap300px1px solid .child:nth-child(4)order-1} bodydiv class="parent"> ="child">1div>2>3>4> html>
flex-grow 容器有多余空间时项目是否扩张
默认是0,都不扩张
如果都是1,则平分剩余空间
如果数字不一致,则按照比例平分剩余空间
没有设置flex-grow属性和已经明确设置过width属性的元素,不参与平分剩余空间
.parent1 .childflex-grow1 .parent2 .child .parent2 .child:last-child3 .parent3 .child:nth-child(1) .parent3 .child:nth-child(2) .parent3 .child:nth-child(3)<!-- 不平分空间 --> 等分空间 ="parent parent1" 按比例等分空间 ="parent parent2" 没有设置flex-grow则不参与 ="parent parent3">
flex-shrink 空间不足时项目是否缩小
默认是1,将等比缩小
如果设置为0,则不参与缩小
负值无效
flex-shrink} 默认等比缩小 全部不缩小 设置为0的不参与缩小 >
flex-basis 定义项目所占的主轴空间
auto 默认值
瓜分剩余空间时会先去除flex-basis中设置的固定值
当flex-basis和width属性同时存在时,width属性不生效
flex
是flex-grow flex-shrink flex-basis的简写,默认是 0 1 auto
如果要设置项目平分空间,建议设置 flex:1 这种简写方式
align-self 设置项目的交叉轴对齐方式,可覆盖父容器设置的align-items属性
auto 默认值,表示继承自父容器;如果没有父容器,则等同于stretch
align-itemscenter .parent .child:first-childalign-selfflex-start .parent .child:last-childflex-end>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。