flex子项目在主轴的缩放比例,不指定flex属性,则不参与伸缩分配
1、设置 flex 缩放的 限定值
min-width 最小值 min-width:280px 最小宽度不能小于280px
max-width 最大值 max-width:1280px 最大宽度不能大于1280px
2、flex-direction 调整主轴方向(默认水平方向)
column 垂直排列
column-reverse 对齐方式与 column相反
row 水平排列
row-reverse 对齐方式与 row 相反
3、justify-content调整主轴对齐方式(水平对齐)
flex-start,默认值,相当于左对齐,盒子顺序不变
flex-end,相当于右对齐,盒子顺序不变
center,相当于居中显示
space-between,左右的盒子贴近父盒子,中间的平均分布空白间距
space-around,相当于给每个盒子添加了左右 margin 外边距
4、align-items调整侧轴对齐(垂直对齐(单行))
stretch,默认值,让子元素的高度拉伸适用父容器(子元素不给高度的前提下)
center,垂直居中
flex-start,上对齐
flex-end,底对齐
5、flex-wrap控制是否换行,当子盒子内容宽度多余父盒子时如何处理
nowrap,默认值,不换行,收缩显示在一行
wrap,拆行显示
wrap-reverse,拆行,以相反的顺序显示
6、flex-flow 是 flex-direction、flex-wrap 的简写形式
flex-flow:flex-direction flex-wrap;
白话记忆:flex-flow:排列方向 换不换行;两个中间用空格
7、align-content 堆栈(由flex-wrap 产生的独立行)多行垂直对齐方式
stretch,默认值,盒子被拉伸以适应容器
center,居中显示
flex-start,头对齐
flex-end,底对齐
space-between,项目位于各行之间留有空白的容器内
space-around,项目位于各行之前,之间,之后都留有空白的容器内
例如:
display:flex;
flex-flow:row wrap;
align-content:center; // 设置完 上面两个条件,多行垂直才会起作用
必须对父元素设置自由盒属性 display:flex,并且设置排列方式为横向排列 flex-direction:row;
并设置换行,flex-wrap:wrap;这样才会起作用
8、order 控制子项目的排列顺序,正序方式排序,从小到大。
用整数值来定义排列顺序,数值小的排在前面,可以是负值,默认值是0
order:1;