弹性盒【控制子元素在父元素中的位置】:
display: flex /inline-flex
特点:
1】在弹性盒内部,所有元素都是按照主轴排列的(可以从上往下排,也可以从左往右排)
2】在弹性盒内部的所有元素,都会默认转成块状元素,可以直接添加宽高
3】弹性盒只能影响它的子元素,不能影响孙元素
让父元素形成弹性盒【display:flex;】:
【给父元素加的属性】
1、改变主轴方向 flex-direction:
row:从左往右(默认值)
column:从上往下
row-reverse:从右往左
column-reverse:从下往上
2、改变主轴排列方式 justify-content:
flex-start:主轴的顶端对齐(默认值)
flex-end:主轴的末端对齐
center:主轴的中间对齐
space-around:平分主轴的剩余空间,最两边的距离是中间的一半
space-between:平分主轴的剩余空间,最两边为0
space-evenly:完全平分主轴的剩余空间
3、改变侧轴(交叉轴;和主轴垂直的那个轴)的排列方式 align-items:
flex-start:侧轴的顶端对齐
center:侧轴的中间对齐
flex-end:侧轴的末端对齐
baseline:效果类似于顶端对齐
stretch:如果侧轴对应的长度不写,默认拉伸,与父元素侧轴长度相同(默认值)
4、子元素是否换行 flex-wrap:
nowrap:不换行(默认值)
wrap:换行
wrap-reverse:换行,改变侧轴方向
5、行与行之间的排列顺序 align-content:
flex-start:侧轴的顶端对齐
flex-end:侧轴的末端对齐
center:侧轴的中间对齐
space-around:平分主轴的剩余空间,最两边的距离是中间的一半
space-between:平分主轴的剩余空间,最两边为0
space-evenly:完全平分主轴的剩余空间
【给子元素加的属性】
1、order:整数
改编自元素的排列顺序,数值越大越靠后,可以是负数,默认值是0
2、align-self:
flex-start:侧轴的顶端对齐
center:侧轴的中间对齐
flex-end:侧轴的末端对齐
baseline:效果类似于顶端对齐
stretch:如果侧轴对应的长度不写,默认拉伸,与父元素侧轴长度相同
3、flex-grow:
分配主轴的剩余空间(子元素的放大比例),后跟自然数,默认值是0
例:flex-grow:2;
4、flex-shrink:
子元素的缩小比例,0:不进行压缩,依旧不会换行;1:进行压缩(默认值)
5、flex-basis:
在分配剩余空间之前,占据的空间;auto(默认值)
6、flex:
flex-grow(必填) flex-shrink(选填) flex-basis(选填)
flex:0 1 auto(默认值);
很多时候用flex取代flex-grow
CSS多列:
1、column-count
说明: 属性规定元素应该被分隔的列数 适用于:除table外的非替换块级元素, table-cells, inline-block元素
2、column-gap
说明: 属性规定列之间的间隔大小
默认是文字大小
3、column-rule
说明: 设置或检索对象的列与列之间的边框。复合属性。 column-rule-color规定列之间规则的颜色。 column-rule-style规定列之间规则的样式。 column-rule-width规定列之间规则的宽度。
4、column-fill
说明: 设置或检索对象所有列的高度是否统一 auto:列高度自适应内容 balance:所有列的高度以其中最高的一列统一
默认是balance
5、column-span
说明: 设置或检索对象元素是否横跨所有列。 none:不跨列 all:横跨所有列
6、column-width
说明: 设置或检索对象每列的宽度