现象
1、display:flex给父元素后,子元素横着排,且高等于父元素高
2、子元素无论多大,都会强制在父元素中
改变盒子模型的方法
box-sizing
conent-box 默认值
border-box 变为怪异盒子
盒子模型计算方式
正常盒子=width+margin左右+padding左右+border左右 左右都要加上
怪异盒子=width+margin左右 width中包含了padding值和border值
flex容器属性(父元素)
父元素且是最直接的父元素
1、display
flex 多个父元素时竖着排,margin:0 auto 可以居中,且可以做显示效果
inline-flex 多个父元素时横着排,margin:0 auto 不能居中
设置flex布局后,子元素上的浮动等效果都会消失
2、flex-direction
决定主轴方向,即子元素的排列方向
row 横着排,且是默认值
row-reverse 反向横着排
column 竖着排
colum-reverse 后向竖着排
row时,x轴是主轴 column时,y轴是主轴
3、flex-wrap
子元素是否换行显示
nowrap 不换行
wrap 换行
wrap-reverse 反向换行
4、flex-flow
row nowrap 默认值 (3和2的简写)
5、justify-content
子元素对齐方式 2会影响5
flex-start/end 开始/结束位
center 整体居中
space-between 空间两端对齐
space-around 均分对齐
6、align-items
交叉轴对齐方式
stretch 拉伸等高,默认值
baseline 基线对齐
flex-start/end 开始/结束位
center 整体居中
7、algin-content
多根轴线对齐方式
flex-start/end 开始/结束位
center 整体居中
space-between 空间两端对齐
space-around 均分对齐
对单行不起作用,且多行有效时,会合并默认间距
flex项目属性(子元素)
1、order
控制元素排列顺序,数越小越靠前,默认为0
2、flex-grow
放大比例,默认为0,为1时指平分剩余空间
3、flex-shrink
缩小比例,默认为1,为0时指实际大小
2指剩余空间的2分之1
4、flex-basis
等于width
5、flex简写
grow shrink basis 默认为0,1,auto
注释会影响控制台解析,但不影响显示效果
6、algin-self
自己对齐,且只控制自己
️我还很喜欢你、就像sin²x+cos²x始终如一