本文内容来自阮一峰Flex布局教程,原文链接(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
如何使用:
- display:flex;
- display:inline-flex;(行内元素)
- display:-webkit-flex;(webkit内核)
概述:
- 主轴默认水平从左到右,交叉轴默认垂直从上到下
- 应用display:flex的元素成为容器,里面的成为flex item
- item默认从左到右排列在主轴上
flex容器的属性:
属性名 可选值 作用 flex-direction row,row-reverse,column,column-reverse 决定主轴的方向 flex-wrap nowrap,wrap,wrap-reverse 是否换行 flex-flow flex-direction + flex-wrap flex-direction属性和flex-wrap属性的简写形式 justify-content flex-start,flex-end,center,space-between,space-around 定义了项目在主轴上的对齐方式 align-items flex-start,flex-end,center,baseline,stretch 定义项目在交叉轴上如何对齐 align-content flex-start,flex-end,center,space-between,space-around ,stretch 定义了多根轴线的对齐方式
flex item的属性:
属性名 可选值 作用 order number 定义项目的排列顺序。数值越小,排列越靠前,默认为0 flex-grow number 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大 flex-shrink number 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 flex-basis length 定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。 flex flex-grow + flex-shrink + flex-basis flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。 align-self auto,flex-start,flex-end,center,baseline,stretch 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
网友评论