Flexbox 布局 - HTML & CSS

01. Flexbox——弹性盒子，布局救星

Flexbox 出现之前，CSS 做水平居中、等分布局、垂直对齐让人崩溃——float、clearfix 各种 hack。Flexbox 就是来救场的。思路特简单：给容器设 display: flex，子元素自动变「弹性元素」，在一行或一列里排列、对齐、分空间。就像把东西放进会自动调整的抽屉里。

02. 容器属性——管「抽屉」的

flex-direction——横排 row 或竖排 column justify-content——主轴对齐（居中、两端对齐、均匀分布） align-items——交叉轴对齐（顶、中、底、拉伸） flex-wrap——多了换不换行 gap——子元素之间的间距

css

/* Flexbox 容器 */
.container {
display: flex;
flex-direction: row;           /* 横排（默认） */
justify-content: space-between; /* 两端对齐 */
align-items: center;           /* 垂直居中 */
flex-wrap: wrap;               /* 多了自动换行 */
gap: 16px;
}

/* 水平居中 */
.h-center { display: flex; justify-content: center; }

/* 万能居中（水平+垂直） */
.perfect-center { display: flex; justify-content: center; align-items: center; }

03. 子元素属性——管「里面东西」的

flex-grow——有多余空间时能「长大」多少 flex-shrink——空间不够时能「缩小」多少 flex-basis——初始大小 flex——上面仨的简写，flex: 1 就是均分空间 align-self——单独设置某一项的对齐方式

css

/* 子元素 */
.item { flex: 1; }          /* 均分剩余空间 */
.item-fixed { flex: 0 0 200px; }  /* 固定 200px */
.item-double { flex: 2; }   /* 占别人的两倍 */

/* 三栏布局（两侧固定 中间自适应） */
.layout { display: flex; }
.sidebar { flex: 0 0 250px; }
.main    { flex: 1; }
.aside   { flex: 0 0 300px; }

flex: 1 是 CSS 里用得最频繁的简写之一，等于告诉元素「剩余空间你都吃了，跟大家平分」。

04. Flexbox 实战场景

Flexbox 日常开发就能搞定大部分布局：导航栏（logo 左菜单右）、卡片列表（自动换行间距均匀）、居中（水平垂直再也不用纠结）、等分（几等分轻轻松松）、圣杯布局（侧边固定中间自适应）。

知识测验

第 1/5 题正确 0

justify-content: center 干嘛的？

CSS Grid 布局