Flex布局
Flex布局Flex布局,Flexiable box,即弹性布局。 .box { display: flex; } 行内元素 .inline-box { display: inline-flex; } Webkit内核的浏览器,必须加上
Flex容器Flex容器,采用Flex布局的元素;它的所有子元素自动成为Flex item,称为Flex项目。 容器的属性容器的六个属性:
flex-direction属性主轴的方向,可能的值:
flex-wrap属性如果一条轴线排不下,如何处理:
justify-content属性flex item在main axis上的对齐方式:
align-items属性项目在交叉轴上如何对齐
align-content属性多根轴线的对齐方式,只有出现多轴的情况下才有效
Flex项目flex item上的属性
order属性定义项目的排列顺序,排列越小越靠前,默认为0 flex-grow属性项目的发大比例,默认为0,即如果存在剩余空间,也不放大 flex-shrink属性定义项目的缩小比例,默认1,如果空间不足,该项目将缩小 flex-basis属性定义在分配多余空间之前,项目占据main axis空间 flex属性flex属性是 align-self属性定义单个item的对齐方式,可以覆盖flex容器的align-items属性 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |