Ceryn

CSS Flexbox

6分钟阅读

活跃分钟 0访问量 0点赞量 0点击量 0

网站

CSS Flexbox

Flexbox | MDN

引入

Flexbox 用来处理一维布局，也就是主要沿着一条轴排列元素。

它很适合做导航栏、按钮组、卡片列表、垂直居中和左右分布。

正文

定义

定义

Flexbox 是 CSS 的一维弹性布局模型，用于控制容器中子元素在主轴和交叉轴上的排列、对齐和空间分配。

使用 Flexbox 时，父元素叫 flex 容器，直接子元素叫 flex 项目。

基础语法

.container {
  display: flex;
}

只要给父元素设置 display: flex;，它的直接子元素就会按 Flexbox 规则排列。

<div class="nav">
  <a href="#">首页</a>
  <a href="#">文章</a>
  <a href="#">关于</a>
</div>
.nav {
  display: flex;
  gap: 16px;
}

主轴和交叉轴

Flexbox 中最重要的是两个方向：

名称说明
主轴flex 项目主要排列的方向
交叉轴和主轴垂直的方向

默认情况下，主轴是从左到右。

也就是子元素会横向排列。

容器常见属性

属性作用
display: flex;创建 flex 容器
flex-*direction*设置主轴方向
justify-content设置主轴上的对齐方式
align-items设置交叉轴上的对齐方式
flex-wrap控制是否换行
gap设置项目之间的间距

flex-direction

flex-direction 用来设置主轴方向。

.container {
  display: flex;
  flex-direction: row;
}

常见值：

值作用
row默认值，横向从左到右排列
row-reverse横向从右到左排列
column纵向从上到下排列
column-reverse纵向从下到上排列

justify-content

justify-content 控制项目在主轴上的对齐方式。

.container {
  display: flex;
  justify-content: center;
}

常见值：

值作用
flex-start靠主轴起点排列
flex-end靠主轴终点排列
center居中排列
space-between两端对齐，中间平均分布
space-around每个项目两侧都有空间
space-evenly所有间距完全平均

align-items

align-items 控制项目在交叉轴上的对齐方式。

.container {
  display: flex;
  align-items: center;
}

常见值：

值作用
stretch默认值，拉伸填满交叉轴
flex-start靠交叉轴起点
flex-end靠交叉轴终点
center交叉轴居中
baseline按文字基线对齐

水平垂直居中

Flexbox 很常用于居中。

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

justify-content: center; 负责主轴居中。
align-items: center; 负责交叉轴居中。

换行 flex-wrap

默认情况下，flex 项目会尽量排在一行。

如果空间不够，可以允许换行。

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

常见值：

值作用
nowrap默认值，不换行
wrap空间不够时换行
wrap-reverse反方向换行

项目常见属性

属性作用
flex设置项目放大、缩小和基础尺寸
flex-grow设置剩余空间如何放大
flex-shrink设置空间不足时如何缩小
flex-basis设置项目基础尺寸
align-self单独控制某个项目的交叉轴对齐
order调整项目排列顺序

flex 简写

flex: 1 1 auto; 代表 flex-grow flex-shrink flex-basis 这三个值的简写

.item {
  flex: 1;
}

flex: 1; 常用来让多个项目平均分配剩余空间。

<div class="columns">
  <div class="item">左</div>
  <div class="item">中</div>
  <div class="item">右</div>
</div>
.columns {
  display: flex;
  gap: 16px;
}
 
.item {
  flex: 1;
}

三个 .item 会尽量等宽排列。

例子

两端对齐导航栏

<header class="header">
  <div class="logo">Logo</div>
  <nav class="menu">导航</nav>
</header>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

卡片列表

<div class="cards">
  <article class="card">卡片 1</article>
  <article class="card">卡片 2</article>
  <article class="card">卡片 3</article>
</div>
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
 
.card {
  flex: 1 1 240px;
  padding: 16px;
  border: 1px solid #dddddd;
}

flex: 1 1 240px; 表示卡片基础宽度是 240px，同时可以放大和缩小。

特点

  • Flexbox 适合一维布局
  • 父元素设置 display: flex; 后，直接子元素成为 flex 项目
  • justify-content 控制主轴对齐
  • align-items 控制交叉轴对齐
  • gap 可以直接设置项目间距
  • flex: 1; 常用于平均分配空间

注意事项

  • Flexbox 是一维布局，不适合所有二维网格场景
  • justify-content 和 align-items 的方向会受 flex-direction 影响
  • 只有 flex 容器的直接子元素才是 flex 项目
  • 如果需要同时控制行和列，更适合使用 CSS Grid

理解

可以把 Flexbox 理解为一排可以自动伸缩的盒子。

它最擅长解决“这一行或这一列里的元素怎么排列、怎么对齐、怎么分空间”的问题。

做导航、居中、按钮组、卡片横排时，Flexbox 通常很顺手。

引出

Flexbox 适合一维布局，如果要同时控制行和列，可以继续学习 CSS Grid。

关系图谱

反向链接