flex 重要概念
- 开启了Flex布局的容器叫做 flex container
- flex里的直接子元素叫做 flex items
flex
display: flex // flex container 容器为块级元素
display: inline-flex // flex container 容器为行内块元素
flex-container:
- flex-direction
- flex items 默认都是沿着 main axis(主轴) 从 main start 开始往 main end 方向排布
- flex-direction 可以决定主轴方向
flex-direction: row // 从左到右 (默认)
flex-direction: row-reverse // 反转
flex-direction: column // 主轴纵向排列
flex-direction: column-reverse // 主轴纵向反向排列
- justify-content
- justify-content 决定了 flex items 在 main axis 上的对齐方式
justify-content: flex-start // 与 main start 对齐 (默认)
justify-content: flex-end // 与 main end 对齐
justify-content: center // 居中对齐
justify-content: space-between // 两端靠边中间居中
justify-content: space-evenly // 平均间距
justify-content: space-around // 两端距离是中间距离的一半
- align-items
- align-items 决定了 flex items 在 cross axis 上的对齐方式
align-items: normal // flex items 未设置高度时会拉伸到 flex container 的高度
align-items: flex-start // 顶部对齐
align-items: flex-end // 底部对齐
align-items: center // 中心对齐
align-items: baseline // 基线对齐
- flex-wrap
- 默认情况所有的 flex items 都会在同一行显示，所有 items 宽度大于 flex container的时候会收缩
- flex-wrap 可以控制折行
flex-wrap: nowrap // 不折行 (默认）
flex-wrap: wrap // 折行
flex-wrap: wrap-reverse // 折行反转
- flex-flow
- flex-flow 是 flex-derection || flex-wrap 的缩写
flex-flow: row wrap
- align-content
- align-content 决定了多行 flex-items 在 cross axis 上的对齐方式，用法与justify-content 类似
align-content: stretch (默认值) // 没有高度时拉伸
align-content: flex-start // 与 cross start 对齐
align-content: flex-end // 与 cross end 对齐
align-content: center // 居中对齐
align-content: space-between // 两端靠边中间居中
align-content: space-evenly // 平均间距
align-content: space-around // 两端距离是中间距离的一半
