Flex布局

flex 重要概念

• 开启了Flex布局的容器叫做 flex container
• flex里的直接子元素叫做 flex items

flex

display: flex           // flex container 容器为块级元素
display: inline-flex    // flex container 容器为行内块元素

flex-container:

1. 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   // 主轴纵向反向排列

2. 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    // 两端距离是中间距离的一半

3. 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      // 基线对齐

4. flex-wrap

• 默认情况所有的 flex items 都会在同一行显示，所有 items 宽度大于 flex container的时候会收缩
• flex-wrap 可以控制折行

flex-wrap: nowrap             // 不折行 (默认）
flex-wrap: wrap               // 折行 
flex-wrap: wrap-reverse       // 折行反转

5. flex-flow

• flex-flow 是 flex-derection || flex-wrap 的缩写

flex-flow: row wrap

6. 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    // 两端距离是中间距离的一半