flex布局

flex布局

flex布局的一些常用属性

---

@[TOC](文章目录)

---

前言

flex弹性布局，可以简便、完整、响应式地实现各种页面布局, 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

flex-direction：// 决定主轴的方向
row（默认值）：// 主轴为水平方向，起点在左端。
row-reverse：// 主轴为水平方向，起点在右端。
column：// 主轴为垂直方向，起点在上沿。
column-reverse：// 主轴为垂直方向，起点在下沿。
flex-wrap：// 换行
nowrap（默认）：// 不换行。
wrap：// 换行，第一行在上方。
wrap-reverse：// 换行，第一行在下方。
flex-flow：

flex-flow属性是 flex-direction属性和 flex-wrap属性的简写形式，默认值为row nowrap。

justify-content：// 水平对齐方式
flex-start（默认值）：// 左对齐
flex-end：// 右对齐
center： // 居中
space-between：// 两端对齐，项目之间的间隔都相等。
space-around：// 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items：// 垂直对齐方式
flex-start：// 交叉轴的起点对齐。
flex-end：// 交叉轴的终点对齐。
center：// 交叉轴的中点对齐。
baseline: // 项目的第一行文字的基线对齐。
stretch（默认值）：// 如果项目未设置高度或设为auto，将占满整个容器的高度。

以上在使用时先转为：display: flex; 弹性盒子