前端Wiki/CSS/进阶/Flexbox 弹性布局

justify-content 与 align-items

这两个属性负责容器内的对齐，是 Flex 的灵魂：

justify-content：主轴对齐。flex-start 起点靠拢、flex-end 终点靠拢、center 居中、space-between 两端对齐（中间平分空隙）、space-around 每项两侧留空隙（边上是中间的一半）、space-evenly 空隙完全均分。
align-items：交叉轴对齐。stretch 默认拉伸填满、flex-start 顶对齐、flex-end 底对齐、center 垂直居中、baseline 按文字基线对齐。

一个万能公式：display:flex; justify-content:center; align-items:center;——两行实现完美的水平垂直居中，从此告别算 margin 的日子。

区分三个 space 的诀窍：between 贴边、around 边上有半个空隙、evenly 全部均分。按需选用即可。

本节要点justify 管主轴、align 管交叉轴；两行代码实现水平垂直居中；space-between 贴两端、space-around 边缘半份空隙、space-evenly 完全均分。

CSS

<style>
  .center {
    display: flex;
    justify-content: center;  /* 主轴居中 */
    align-items: center;      /* 交叉轴居中 */
    height: 120px;
    border: 2px dashed #4a9eff;
  }
  .between {
    display: flex;
    justify-content: space-between;
  }
  .center span, .between span {
    background: #ffe0b2; padding: 10px;
  }
</style>
<div class="center"><span>正中央</span></div>
<div class="between">
  <span>左</span><span>右</span>
</div>

🔗 相关词条flex 交叉轴主轴弹性布局

📚 推荐阅读

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

移动前端开发经验指南万象云档

Element Plus v2.2 组件库教程万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读