flex布局

什么是flex布局

flex布局就是Flexible Box的缩写 flex表示弹性布局 可以为盒状模型提供最大的灵活性

适用范围

块级元素弹性布局

.box {
  display: flex;
}

内联元素弹性布局

.box {
  display: inline-flex;
}

容器的常用属性

flex-direction 设置容器主轴的方向

// 表示水平方向 由左到右 默认值
flex-direction: row;
// 表示水平方向 由右到左
flex-direction: row-reverse;
// 表示垂直方向 由上到下
flex-direction: column;
// 表示垂直方向 由下到上
flex-direction: column-reverse;

flex-wrap 设置一行溢出的处理

// 不换行 超出则子元素设置的宽度失效
flex-wrap: nowrap;
// 超出换行 向下换行
flex-wrap: wrap;
// 超出换行 向上换行
flex-wrap: wrap-reverse;

flex-flow 是flex-deriction和flex-wrap属性的简写

// 第一个为flex-direction的属性值 第二个为flex-wrap的属性值
flex-flow: row nowrap;

justify-content 水平方向对齐方式

// 左对齐 默认值
justify-content: flex-start;
// 右对齐
justify-content: flex-end;
// 居中对齐
justify-content: center;
// 两端对齐
justify-content: space-between;
// 两侧间距相等
justify-content: space-around;

align-items 垂直方向对齐方式

// 默认值 子元素未设置固定高度就占满容器
align-items: stretch;
// 向上对齐
align-items: flex-start;
// 向下对齐
align-items: flex-end;
// 居中对齐
align-items: center;
// 以文字为基准水平对齐
align-items: baseline;

align-content 多行元素的垂直对齐方式

// 默认值 垂直平分间距占满整个父元素
align-content: stretch;
// 垂直向上对齐
align-content: flex-start;
// 垂直向下对齐
align-content: flex-end;
// 垂直居中对齐
align-content: center;
// 垂直两端对齐
align-content: space-between;
// 垂直两侧间距相等对齐
align-content: space-around;

order 子元素设置排序 数值越小越靠前

// 默认值为0 数值可负数
order: 0;

flex-grow 子元素是否放大显示

// 默认值为0 表示即使容器有剩余空间也不放大显示 如果设置为1 则平均分摊后放大显示
flex-grow: 0;

flex-shrink 子元素是否缩小显示

// 默认值为1 如果空间不够用时所有元素同比例缩小 如果设置为0 则空间不足时该元素也不缩小
flex-shrink: 1;

flex-basis

align-self

flex