CSS【详解】弹性布局 flex

适用场景

一维(行或列)布局

基本概念

  • 包裹所有被布局元素的父元素为容器

  • 所有被布局的元素为项目

  • 项目的排列方向(垂直/水平)为主轴

  • 与主轴垂直的方向交交叉轴

容器上启用 flex 布局

将容器的 display 样式设置为 flexinline-flex

排列方向 flex-direction

  • row(默认值):从左到右水平排列,此时主轴为水平方向

  • row-reverse:从右到左水平排列,此时主轴为水平方向

  • column:从上到下垂直排列,此时主轴为垂直方向

  • column-reverse:从下到上垂直排列,此时主轴为垂直方向

换行 flex-wrap

  • nowrap(默认值):不换行,项目可能被压缩或溢出容器。

  • wrap:换行,第二行在第一行下方(水平排列时)

  • wrap-reverse:换行,第二行在第一行上方(水平排列时)。

主轴上的对齐方式 justify-content

  • flex-start(默认值):项目靠主轴起点对齐。
  • flex-end:项目靠主轴终点对齐
  • center:项目在主轴上居中对齐
  • space-between:项目两端对齐,间隔均匀分布
  • space-around:项目周围间隔均匀分布(两端间隔为中间的一半)
  • space-evenly:项目之间及两端间隔完全相等

交叉轴的对齐方式 align-items

交叉轴即与主轴垂直的方向

  • stretch(默认值):项目拉伸以填满交叉轴。
  • flex-start:项目靠交叉轴起点对齐。
  • flex-end:项目靠交叉轴终点对齐。
  • center:项目在交叉轴上居中对齐。
  • baseline:项目基于文本基线对齐。

多行的对齐方式 align-content

仅在 flex-wrap: wrap 生效

  • flex-start:多行靠交叉轴起点对齐。
  • flex-end:多行靠交叉轴终点对齐。
  • center:多行在交叉轴上居中对齐。
  • stretch:多行拉伸以填满交叉轴剩余空间。
  • space-between:多行两端对齐,间隔均匀分布。
  • space-around:多行周围间隔均匀分布。
  • space-evenly:多行之间及两端间隔完全相等。
css 复制代码
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

项目上添加 flex 特性

放大 flex-grow

  • 定义项目在容器有剩余空间时的放大比例,默认值为 0(不放大)。
  • 给容器添加 min-width: 0overflow: auto;可防止内容撑开容器。
css 复制代码
.item {
  flex-grow: 1; /* 项目将按比例分配剩余空间 */
}

缩小 flex-shrink

定义项目在容器空间不足时的缩小比例,默认值为 1(按比例缩小)。

css 复制代码
.item {
  flex-shrink: 0; /* 项目不缩小,可能导致溢出 */
}


初始大小 flex-basis

定义项目在分配剩余空间之前的初始大小,可以是长度值(如 200px)或百分比(如 50%),默认值为 auto(根据内容大小自动调整)。

css 复制代码
.item {
  flex-basis: 100px; /* 项目初始宽度为 100px */
}

调整项目交叉轴的对齐方式 align-self

优先级高于容器的 align-items

css 复制代码
.item {
  align-self: flex-end; /* 该项目在交叉轴上靠终点对齐 */
}

排序 order

项目的排列顺序。数值越小,排列越靠前,默认为0

简写

flex

flexflex-growflex-shrinkflex-basis 的简写属性,常用写法:

  • flex: 1:等同于 flex: 1 1 0%,表示项目放大、缩小且初始大小为内容大小。
  • flex: 0 1 auto:表示项目不放大、按比例缩小且初始大小为内容大小。
css 复制代码
.item {
  flex: 1;
}

flex-flow

flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

深度详解

剩余空间分配规则

flex-grow,flex-shrink和flex-basis
https://blog.csdn.net/weixin_41192489/article/details/120842902

实战范例

绘制骰子

https://blog.csdn.net/weixin_41192489/article/details/136398234

水平居中导航栏

html 复制代码
<nav class="flex justify-center space-x-4">
  <a href="#">首页</a>
  <a href="#">产品</a>
  <a href="#">关于我们</a>
</nav>
css 复制代码
nav {
  display: flex;
  justify-content: center;
  gap: 16px;
}

垂直居中卡片

html 复制代码
<div class="flex items-center justify-center h-screen bg-gray-200">
  <div class="bg-white p-8 rounded shadow-md">
    <h2 class="text-2xl font-bold mb-4">欢迎使用</h2>
    <p>这是一个垂直居中的卡片。</p>
  </div>
</div>
css 复制代码
body {
  margin: 0;
}

响应式列布局

html 复制代码
<div class="flex flex-wrap">
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">内容1</div>
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">内容2</div>
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">内容3</div>
</div>
css 复制代码
@media (min-width: 768px) {
  .w-1/2 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 1024px) {
  .w-1/3 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
}

实战技巧

注意事项

  • Flex 与 floatclear 冲突:Flex 项目自动脱离文档流,floatclear 属性对其无效。

  • 浏览器兼容性 :主流浏览器(Chrome、Firefox、Safari、Edge)均支持 Flex 布局,但需注意对旧版浏览器(如 IE10 及以下)添加前缀(-webkit-, -ms-)。

相关推荐
雪碧聊技术21 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了23 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light2 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00002 小时前
Vue组件通信方式详解
前端·面试
呆呆的心2 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm2 小时前
Dioxus 与数据库协作
前端·rust