将父盒子设置为display:flex(块级元素),display:inline-flex(内联元素)
弹性盒子有六个属性:
1.flex-drection:row | row-reverse | clomun | clomun-reverse(决定主轴的方向,也就是x轴方向项目的排列方式)
2.felx-wrap:nowrap | wrap | wrap-reserve (决定多余的项目是否换行<默认不换行><换行,第一行在上面><换行,第一行在下面>)
3.flex-flow : flex-direction flex-wrap(是flex-direction和flex-wrap的缩写,默认是row nowrap)
4.justify-content : flex-start<左对齐> | flex-end<右对齐> | center<居中> | space-between<两端对齐,项目之间的间隔都相等> | space-around<项目两边的间隔都相等,所以最两侧的间距比中间的间距要小1/2>
5.align-item:flex-start<y轴起点开始对齐> | flex-end<y轴终点向上进行对齐> | center<y轴中点进行对齐> | baseline<项目的第一行文字对齐> | stretch<如果项目没有定义高度或者高度是auto,那么项目会占满整个盒子>
项目的属性:
1.order:integer (定义项目的排列顺序,数值越小,那么项目排列越向前)
2.flex-grow:number(定义项目的放大比例,默认是0)
3.flex-shrink:number(定义项目的缩小比例,默认是0)
4.flex-basis:number(值可以是项目的width或者height,固定项目的固定空间)
5.flex:grow shrink basis的缩写,
作者:何良语
来源:CSDN
原文:https://blog.csdn.net/sinat_39626276/article/details/79635301
版权声明:本文为博主原创文章,转载请附上博文链接!