<body>
<div class="box1">
<p class="box2">1</p>
<p class="box3">2</p>
<p class="box4">3</p>
</div>
</body>
1.父级元素使用display:flex后,所有的子集元素都会转换成行级元素,也就是自动浮动成一列。
2.webKit内核的浏览器必须加上前缀 -webkit,其他内核的浏览器可以不加。
display: -webkit-flex; /* Safari */
3.父级元素,也就是容器的属性有
flex-direction 代表主轴方向,也就是控制子集元素横向排列还是纵向排列
flex-wrap 行级排列时,控制子集是否自动换行
flex-flow flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap(从左往右排列,不换行)
justify-content 控制所有子集的对齐方式,居中对齐还是怎么对齐
align-items 控制所有子集元素,在垂直方向的对齐方式
align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
——–下面网址是具体属性的对应参数和具体现象
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
下面是子集元素的属性,也就是项目属性
order 定义排列顺序,数值越小,位置越靠前
flex-grow 放大比例。默认是0,也就是不放大
flex-shrink 缩小比列,默认值为1,如果父集空间不够排列,则自动缩小。
flex-basis 它的默认值为auto,即项目的本来大小。
flex flex-grow、flex-shrink和flex-basis的简写,默认值为0 1 auto。后两个属性可选
align-self 设置单个子集元素的对齐方式
flex-basis:可以控制在主轴方向上的所占空间,可以是水平方向,也可以是垂直方向。具体看主轴的定义在水平方向还是在垂直方向
flex属性值通常为1,表示子集元素不放大比例,自适应父级元素容器宽度,项目大小和原来一样
表现为下图所示
flex:1
align-self:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
——–下面网址是具体属性的对应参数和具体现象
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html