flex布局又叫弹性布局
属性为 display:flex;
设置了该属性元素即为弹性盒子,内部元素的排列会依据主轴的方向进行排列,一般默认情况下X轴为主轴,y轴为交叉轴。
弹性盒子的容器属性
- flex-direction 设置主轴的对齐方向
-
row 默认值,横向左对齐(从左到右) column 纵向 row-reverse 反转横向(从右到左,右对齐) column-reverse 反转纵向 - flex-wrap 设置子元素的换行方式
-
wrap 多行(溢出换行) nowrap 默认值,单行(不换行) wrap-reverse 反转wrap多行排列 - justify-content 项目(子元素)在主轴上的对齐方式
-
center 居中 flex-start 默认值,左对齐 flex-end 右对齐 space-around 每个项目两侧间距相等,项目之间的间距比项目与边框的间距大 space-between 两端对齐 - align-items 项目(子元素)在交叉轴上的对齐方式
-
center 中点对齐 flex-start 起点对齐 flex-end 终点对齐 baseline 项目的第一行文字的基线对齐 stretch 默认值,如果项目未设置高度或设为auto,将占满整个容器高度 - flex-flow 多个属性的简写模式,可同时设置主轴对齐方向和换行方式
- align-content 多跟轴线的对齐方式
弹性盒子的项目属性(子元素属性)
- order 项目的排列顺序,数值越小越靠前,默认为0
- flex-grow 项目的放大比例,默认为0【flex-grow:9999999; 成长比无限大】
- flex-shrink 项目的缩小比例,默认为1,一般取值0或1,0即为不缩小,空间不足时,项目缩小
object-fit:cover; 此属性可防止图片由于比例放大导致失真