有用

代码与技术常识07 / 10

Flexbox 六个属性

理解「主轴」和「交叉轴」，大部分布局都能拼出来。

  • 学会用时1 小时
  • 你的收获页面哪里歪了，自己就能改
  • 用到的频率每周 2 次
  • 难度进阶

01为什么学

没学之前

页面元素对不齐，每次都要问别人或让 AI 改。

学会之后

记住主轴和交叉轴，justify 管主轴，align 管交叉轴。

  • 导航栏、卡片、居中、等分布局都能写
  • 看懂别人的 CSS

02图解

图解
主轴（flex-direction: row 时向右） 交叉轴
justify-content 沿主轴排列，align-items 沿交叉轴排列。

03基本单元6 个

  • display: flex
  • flex-direction主轴方向
  • justify-content主轴对齐
  • align-items交叉轴对齐
  • gap间距
  • flex子元素伸缩

04怎么用

  1. 父元素写 display: flex，子元素就沿主轴排列
  2. flex-direction 决定主轴方向：row 横向，column 纵向
  3. justify-content 管主轴，align-items 管交叉轴
  4. gap 控制间距，flex: 1 让子元素平分剩余空间

05速查表

属性作用常用值
justify-content主轴对齐center、space-between
align-items交叉轴对齐center、stretch
flex-direction主轴方向row、column
gap间距8px、16px
flex（子元素）伸缩比例1

06动手试试

Flexbox 实验台

07套用一次

水平垂直居中：display:flex; justify-content:center; align-items:center;

08常见的坑

  • 混淆 justify 和 align

    justify 永远管主轴，改了 flex-direction，方向也跟着变。

  • 想居中却忘了父元素高度

    父元素没有高度，align-items 看不出效果。

09自测与练习

先做 10 秒自测，再动手练一下。

想让子元素沿主轴居中，用？

10 分钟小练习

在实验台里试出：竖向排列、水平居中。

看参考答案
flex-direction: column 加 align-items: center。

+配合着学

代码与技术常识UTF-8 编码规则一个汉字通常占 3 个字节，英文字母占 1 个。代码与技术常识JSON 的六种值对象、数组、字符串、数字、布尔、null：全部就这些。

代码与技术常识的全部 10 条

01HTTP 状态码02Cron 表达式03SQL 的执行顺序04语义化版本 SemVer05浮点数为什么不精确06大 O 的 6 个等级07Flexbox 六个属性08UTF-8 编码规则09JSON 的六种值10输入网址之后发生了什么