CSS 词条目录
前端Wiki/CSS/进阶/Flexbox 弹性布局

主轴与交叉轴

给容器设置 display: flex，它就变成了弹性容器，所有直接子元素自动成为弹性项目，横着排成一行，这就是现代布局的起点。

Flex 的一切围绕两根轴展开：

  • 主轴：项目排列的方向，由 flex-direction 决定。row 向右（默认）、row-reverse 向左、column 向下、column-reverse 向上。
  • 交叉轴：与主轴垂直的那根轴。主轴是横向时交叉轴就是纵向，反之亦然。

所有对齐属性（justify-content、align-items 等）都是围绕这两根轴工作的，所以先分清主轴方向，再谈对齐，这是学 Flex 不迷路的关键。换 flex-direction 后，justify 和 align 的效果会跟着换方向，不是属性失灵。

本节要点display:flex 后子项默认沿主轴水平排列；flex-direction 决定主轴（row/column）；交叉轴永远垂直于主轴；对齐属性随主轴方向一起变。
CSS
<style>
  .row {
    display: flex;              /* 弹性容器 */
    flex-direction: row;        /* 主轴横向 */
  }
  .col {
    display: flex;
    flex-direction: column;     /* 主轴纵向 */
  }
  .row div, .col div {
    background: #d6e9ff; padding: 8px;
    margin: 4px;
  }
</style>
<div class="row">
  <div>1</div><div>2</div><div>3</div>
</div>
<div class="col">
  <div>1</div><div>2</div><div>3</div>
</div>
🔗 相关词条justify-contentalign-itemsflex元素
← 上一篇position 定位
📚 推荐阅读
YY UED 前端规范指南YY UED 前端规范指南万象云档优达学城前端样式指南优达学城前端样式指南万象云档移动前端开发经验指南移动前端开发经验指南万象云档Element Plus v2.2 组件库教程Element Plus v2.2 组件库教程万象云档带你入门前端工程带你入门前端工程万象云档
来自万象云档的免费在线书籍，点击封面直接阅读