flex布局(伸缩盒布局)
目录
1、flex布局的介绍
伸缩盒布局是一种当页面需要适应不同屏幕大小以及不同设备类型时确保元素放置恰当的布局方式。弹性布局可以提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空间。
2、flex布局和传统布局的比较
传统布局:兼容性好,布局繁琐,具有局限性,不能在移动端很好的布局
flex布局:兼容性差,布局简单,没有局限性,移动端应用广泛
3、设置flex布局
在父元素设置display:flex;
4、常见的父项元素
flex-direction 设置主轴的方向
row 默认值,主轴方向为水平方向,起点在左端
flex-direction: row;
row-reverse 主轴方向为水平方向,起点在右端
flex-direction: row-reverse;
column 主轴方向为垂直方向,起点在上方
flex-direction: column;
column-reverse 主轴方向为垂直方向,起点在下方
flex-direction: column-reverse;
justify-content 设置主轴上的子元素排列方式
flex-start 左对齐
justify-content:flex-start;
flex-end 右对齐
justify-content:flex-end;
center 居中
justify-content:center;
space-between 两端对齐
justify-content:space-between;
space-around 每个项目两侧间隔相等,项目之间的间隔比项目与边框的间隔大一倍
justify-content:space-around;
flex-wrap 设置子元素是否换行
nowrap 默认,不换行
flex-wrap: nowrap;
wrap 换行,第一行在上方
flex-wrap: wrap;
wrap-reverse 换行,第一行在下方
flex-wrap: wrap-reverse;
align-items 设置侧轴上的子元素排列方式
flex-start 与交叉轴的起点对齐
align-items: flex-start;
flex-end 与交叉轴的终点对齐
align-items: flex-end;
center 与交叉轴的中点对齐
align-items: center;
baseline 与项目的第一行文字的基线对齐
align-items: baseline;