目录
一、定义
弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间,我们在一个盒子样式中设置以下代码,就能让盒子变为弹性盒子,从而控制子元素
display:flex
二、作用
让子元素都按照【主轴排列】,也能让里面所有的子元素都能设置宽度并且在里面只有设置margin:auto就能使元素垂直水平居中等等
三、flex-direction
作用:
改变主轴
属性值:
row(默认):
默认x轴为主轴,横向排列,例
row-reverse :
反转横向排列,例
column :
y轴为主轴,纵向排列,例
column-reverse:
反转纵向排列,从下往上排,最后一项排在最上面
四、justify-content
作用:
元素在主轴上的对齐方式
属性:
flex-start
默认,顶端对齐,例,主轴为X轴时
flex-end
末端对齐,例,主轴为X轴时
center
居中对齐,例,主轴为X轴时
space-between
两端对齐,中间自动分配,例,主轴为X轴时
space-around
自动分配距离,例,主轴为X轴时
五、align-items
作用:
元素在侧轴上的对齐方式
属性值:
flex-start
弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。顶部显示,例,主轴为X轴时
flex-end
弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。例,主轴为X轴时
center
弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。例,主轴为X轴时
baseline
如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。 当子元素被padding撑开时,不与flex-start等效。例,主轴为X轴时
stretch
默认值,拉伸,在没有设置子元素时,将高拉伸为父元素高。例,主轴为X轴时
六、flex-wrap
作用:
控制是否换行
属性值
nowrap
默认值,flex容器为单行。该情况下flex子项可能会溢出容器
wrapflex
容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行
wrap-reverse
反转 wrap 排列。
tip:当父元素有高度时,换行自带行间距
七、align-content
作用:
调整行与行之间的对齐方式,但是只针对在有多行的情况下
属性值:
flex-start
没有行间距
flex-end
底对齐没有行间距
center
居中没有行间距
space-between
两端对齐,中间自动分配
space-around
自动分配距离
八、align-self
作用:
写在子元素上面,控制某一个子元素在侧轴的对齐方式
属性值:
auto
默认值。
stretch
元素被拉伸以适应容器
center
元素位于容器的中心
flex-start
元素位于容器的开头
flex-end
元素位于容器的结尾
九、order
作用:
排列顺序 --- 排序优先级,数字越大越往后排,默认为0,支持负数。
十、flex
复合属性
属性值:
flex-grow
拉伸,默认值为0,子元素宽高加起来小于父元素宽高,要有剩余空间,才会有效果,拉伸是宽是高跟主轴有关
flex-shrink
元素宽高超出父元素宽高才有效。为0时,无变化
flex-basis
项目长度
flex:1
将弹性盒主轴上剩余的空间全部分配给当前元素
复合式写法
flex:0 1 auto; 参数分别代表flex-grow、flex-shrink、flex-basis