全面解析 CSS Flex 布局：从入门到精通的所有属性详解

1. Flex 容器属性

通过 display: flex 或 display: inline-flex 将元素设置为 Flex 容器。以下是所有容器属性。

1.1 display: flex | inline-flex

  • 作用：定义一个 Flex 容器。
  • 可选值：
    • flex：块级容器，占据整行。
    • inline-flex：行内块容器，宽度随内容自适应。
  • 示例：
    .container {display: flex;
}
.inline-container {display: inline-flex;
}
    效果：flex 使容器占满整行，inline-flex 宽度随内容变化。

1.2 flex-direction

  • 作用：定义主轴方向。
  • 可选值：
    • row（默认）：水平从左到右。
    • row-reverse：水平从右到左。
    • column：垂直从上到下。
    • column-reverse：垂直从下到上。
  • 示例：
    .container {display: flex;flex-direction: column;
}
    效果：子项垂直排列，从上到下。

1.3 flex-wrap

  • 作用：控制子项是否换行。
  • 可选值：
    • nowrap（默认）：单行排列，可能压缩子项。
    • wrap：多行排列，子项超出容器时换行。
    • wrap-reverse：多行排列，行顺序反转。
  • 示例：
    .container {display: flex;flex-wrap: wrap;
}
    效果：子项超出容器宽度时自动换行。

1.4 flex-flow

  • 作用：flex-direction 和 flex-wrap 的简写。
  • 语法：flex-flow: <flex-direction> <flex-wrap>;
  • 示例：
    .container {display: flex;flex-flow: row wrap;
}
    效果：子项水平排列，支持换行。

1.5 justify-content

  • 作用：控制主轴上子项的对齐方式。
  • 可选值：
    • flex-start（默认）：靠主轴起点。
    • flex-end：靠主轴终点。
    • center：居中对齐。
    • space-between：两端对齐，间距均分。
    • space-around：子项周围间距相等。
    • space-evenly：间距完全均等。
  • 示例：
    .container {display: flex;justify-content: space-between;
}
    效果：子项两端对齐，剩余空间均分。

1.6 align-items

  • 作用：控制交叉轴上子项的对齐方式（单行）。
  • 可选值：
    • stretch（默认）：子项拉伸填满交叉轴。
    • flex-start：靠交叉轴起点。
    • flex-end：靠交叉轴终点。
    • center：居中对齐。
    • baseline：按文本基线对齐。
  • 示例：
    .container {display: flex;align-items: center;
}
    效果：子项在交叉轴上居中。

1.7 align-content

  • 作用：控制多行子项在交叉轴上的对齐方式（需 flex-wrap: wrap）。
  • 可选值：
    • stretch（默认）：行拉伸填满交叉轴。
    • flex-start：靠交叉轴起点。
    • flex-end：靠交叉轴终点。
    • center：居中对齐。
    • space-between：两端对齐，间距均分。
    • space-around：行周围间距相等。
    • space-evenly：行间距完全均等。
  • 示例：
    .container {display: flex;flex-wrap: wrap;align-content: space-around;
}
    效果：多行子项在交叉轴上均匀分布。

1.8 gap, row-gap, column-gap

  • 作用：设置子项间距。
  • 可选值：长度值（如 10px、1rem）。
  • 说明：
    • gap：同时设置行间距和列间距。
    • row-gap：单独设置行间距。
    • column-gap：单独设置列间距。
  • 示例：
    .container {display: flex;gap: 20px;
}
    效果：子项间水平和垂直间距为 20px。

2. Flex 子项属性

Flex 子项（容器的直接子元素）通过以下属性控制自身行为。

2.1 flex-grow

  • 作用：定义子项分配主轴剩余空间的比例。
  • 可选值：非负整数（默认 0）。
  • 说明：值越大，子项占用剩余空间越多。
  • 示例：
    .item1 {flex-grow: 1;
}
.item2 {flex-grow: 2;
}
    效果：item2 占用剩余空间是 item1 的两倍。

2.2 flex-shrink

  • 作用：定义子项在主轴上压缩的比例。
  • 可选值：非负整数（默认 1）。
  • 说明：值越大，空间不足时子项压缩越多。
  • 示例：
    .item1 {flex-shrink: 0;
}
.item2 {flex-shrink: 2;
}
    效果：空间不足时，item1 不压缩，item2 压缩更多。

2.3 flex-basis

  • 作用：定义子项在主轴上的初始大小。
  • 可选值：长度值（如 100px、20%）或 auto（默认）。
  • 说明：优先级高于 width 或 height。
  • 示例：
    .item {flex-basis: 200px;
}
    效果：子项初始宽度为 200px。

2.4 flex

  • 作用：flex-grow、flex-shrink 和 flex-basis 的简写。
  • 语法：flex: <flex-grow> <flex-shrink> <flex-basis>;
  • 常用值：
    • flex: 1：等同于 flex: 1 1 0%。
    • flex: auto：等同于 flex: 1 1 auto。
    • flex: none：等同于 flex: 0 0 auto。
  • 示例：
    .item {flex: 1 1 200px;
}
    效果：子项初始宽度 200px，可伸缩。

2.5 align-self

  • 作用：单独控制子项在交叉轴上的对齐，覆盖 align-items。
  • 可选值：auto（默认，继承 align-items）、flex-start、flex-end、center、baseline、stretch。
  • 示例：
    .item {align-self: flex-end;
}
    效果：该子项靠交叉轴终点对齐。

2.6 order

  • 作用：控制子项排列顺序。
  • 可选值：整数（默认 0）。
  • 说明：值越小，子项越靠前。
  • 示例：
    .item1 {order: 2;
}
.item2 {order: 1;
}
    效果：item2 排在 item1 之前。

3. 常见问题：flex: 1 导致无法固定宽度或高度

3.1 问题描述

使用 flex: 1（等同于 flex: 1 1 0%）时，子项会忽略显式设置的 width 或 height，导致无法固定宽度或高度。这是因为：

  • flex: 1 设置了 flex-basis: 0%，使子项的初始主轴尺寸为 0，优先级高于 width 或 height。
  • flex-grow: 1 使子项尽可能占用剩余空间。
  • 当主轴为水平方向（flex-direction: row），width 被忽略；当主轴为垂直方向（flex-direction: column），height 被忽略。

示例（问题重现）：

.container {display: flex;
}
.item {flex: 1;width: 200px; /* 被忽略 */height: 100px;
}

效果：子项宽度由剩余空间决定，width: 200px 无效。

3.2 解决方案

要固定宽度或高度，可以通过以下方式解决：

  1. 使用 flex-basis 明确指定初始尺寸：

    .item {flex: 1 1 200px; /* flex-basis 设置为 200px */height: 100px;
}

    效果：子项宽度固定为 200px，同时保持伸缩能力。

  2. 设置 flex: none 或 flex: 0 0 200px：

    .item {flex: none; /* 等同于 flex: 0 0 auto */width: 200px;height: 100px;
}

    效果：子项宽度固定为 200px，不伸缩。

  3. 使用 min-width 或 max-width 限制尺寸：

    .item {flex: 1;min-width: 200px;max-width: 200px;height: 100px;
}

    效果：子项宽度固定为 200px，防止被拉伸或压缩。

  4. 在 flex-direction: column 中固定高度：

    .container {display: flex;flex-direction: column;
}
.item {flex: 0 0 100px; /* 固定高度 */width: 200px;
}

    效果：子项高度固定为 100px。

3.3 注意事项

  • 优先级：flex-basis 优先级高于 width 或 height，但 min-width/max-width 和 min-height/max-height 优先级更高。
  • 场景选择：根据需求选择 flex: none（完全固定）或 flex: 1 1 200px（固定初始尺寸但允许伸缩）。
  • 调试技巧：使用浏览器的开发者工具检查子项的计算尺寸，确认是否被 flex-basis 覆盖。

4. 实战示例：居中布局与响应式卡片

以下是一个综合示例，展示如何使用 Flex 布局实现居中和响应式卡片，并解决 flex: 1 的尺寸问题。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Flex 布局示例</title><style>.container {display: flex;flex-flow: row wrap;justify-content: space-around;align-items: center;gap: 20px;min-height: 100vh;background: #f0f0f0;}.card {flex: 0 0 200px; /* 固定宽度 200px */background: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);text-align: center;height: 100px; /* 固定高度 */}.card:nth-child(2) {align-self: flex-end;order: -1;}</style>
</head>
<body><div class="container"><div class="card">卡片 1</div><div class="card">卡片 2</div><div class="card">卡片 3</div></div>
</body>
</html>

效果说明：

  • 使用 flex: 0 0 200px 确保卡片宽度固定为 200px，不会被拉伸或压缩。
  • height: 100px 固定卡片高度。
  • flex-flow: row wrap 支持换行，justify-content: space-around 和 gap: 20px 确保间距均匀。
  • 第二个卡片通过 align-self 和 order 调整位置和顺序。

5. 常见问题与解决方案

  1. 为什么子项没有拉伸？
    • 检查 align-items 是否为 stretch，且子项没有固定高度。
  2. 为什么子项不换行？
    • 确保 flex-wrap 设置为 wrap 或 wrap-reverse。
  3. 为什么 flex: 1 导致宽度/高度失效？
    • 参考第 3 节，使用 flex-basis 或 min-width/max-width 固定尺寸。
  4. 如何实现完美居中？
    • 使用 justify-content: center 和 align-items: center。

6. 总结

Flex 布局通过其强大的容器和子项属性，为开发者提供了灵活的布局控制能力。特别需要注意的是，flex: 1 会导致 flex-basis: 0%，从而覆盖显式设置的 width 或 height。通过合理设置 flex-basis、min-width/max-width 或 flex: none，可以轻松解决尺寸固定问题。希望这篇教程能帮助你从入门到精通 Flex 布局，快速应用到实际项目中！

点个收藏，关注前端结城，一起用代码点亮前端世界！🚀

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/diannao/93274.shtml
繁体地址，请注明出处：http://hk.pswp.cn/diannao/93274.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据结构：对角矩阵（Diagonal Matrix）

数据结构：对角矩阵（Diagonal Matrix）

目录 矩阵的传统表示&#xff1a;二维数组 &#x1f50d; 真正有用的数据是哪些&#xff1f; 从二维数组转为一维数组 用 C 类实现对角矩阵 1. 对角矩阵真正需要存什么&#xff1f; 2. 对角矩阵允许哪些行为&#xff1f; 3. 为什么要动态分配数组&#xff1f; 接下来推…
阅读更多...
Leetcode_349.两个数组的交集

Leetcode_349.两个数组的交集

这道题的意思很明确&#xff0c;就是让寻找两个数组中的共同元素&#xff0c;并去重&#xff0c;由此可以联想到哈希表的特性&#xff0c;注意到题目给的数据范围&#xff0c;在1000以内&#xff0c;所以本题可以使用 STL 的库函数&#xff0c;也可以使用数组进行模拟。 本题要…
阅读更多...
STM32——寄存器映射

STM32——寄存器映射

总 &#xff1a;STM32——HAL库总结-CSDN博客 芯片资料&#xff1a; STM32F1系列参考手册-V10&#xff08;中&#xff09; STM32F103ZET6(English) 一、寄存器基础 1.1 简介 单片机内部的控制机构。 像空气开关控制电路一样的原理&#xff0c;打开关闭某个开关&#xff0…
阅读更多...
Java响应式编程

Java响应式编程

Java 响应式编程是一种基于异步数据流处理的编程范式&#xff0c;它强调数据流的声明式构建和传播变化的自动响应。Java 9 引入的Flow API为响应式编程提供了标准接口&#xff0c;而 Reactor 和 RxJava 等第三方库则提供了更丰富的操作符和工具。核心概念Publisher&#xff08;…
阅读更多...
【重学数据结构】二叉搜索树 Binary Search Tree

【重学数据结构】二叉搜索树 Binary Search Tree

目录 二叉搜索树的数据结构 手写实现二叉搜索树 树节点定义 插入节点 源码 流程图 二叉树插入步骤图解 第一步: 插入 20 第二步: 插入 10 第三步: 插入 30 第四步: 插入 5 查找节点 源码 场景一: 查找成功 (search for 25) 第一步: 从根节点开始 第二步:…
阅读更多...
四、计算机组成原理——第1章：计算机系统概述

四、计算机组成原理——第1章：计算机系统概述

目录 1.1计算机发展历程 1.1.1计算机硬件的发展 1.计算机的四代变化 2.计算机元件的更新换代 1.1.2计算机软件的发展 1.2计算机系统层次结构 1.2.1计算机系统的组成 1.2.2计算机硬件 1.冯诺依曼机基本思想 2.计算机的功能部件 (1)输入设备 (2)输出设备 (3)存储器 (4)运算器 (5)…
阅读更多...
flutter TextField 失去焦点事件

flutter TextField 失去焦点事件

在 Flutter 中&#xff0c;处理 TextField 的失去焦点事件&#xff08;即失去焦点时触发的操作&#xff09;通常有两种常用方式&#xff1a;使用 FocusNode 或 onEditingComplete 回调。以下是具体实现&#xff1a; import package:flutter/material.dart;class MyTextField e…
阅读更多...
Moonlight for ChromeOS 常见问题解决方案

Moonlight for ChromeOS 常见问题解决方案

Moonlight for ChromeOS 常见问题解决方案 项目基础介绍 Moonlight for ChromeOS 是一个开源的 NVIDIA GameStream 客户端&#xff0c;允许用户将他们的游戏从高性能的桌面电脑流式传输到运行 ChromeOS 的设备上。该项目还支持 Android 和 iOS/tvOS 平台。Moonlight for Chrome…
阅读更多...
SQL语句：读操作、写操作、视图

SQL语句：读操作、写操作、视图

文章目录读操作分类基础查询语句示例高级查询--分组查询、子查询、表连接、联合查询分组查询&#xff1a;子查询&#xff08;嵌套查询&#xff09;表连接联合查询写操作视图SQL&#xff1a;结构化查询语言读操作 重点是where查询&#xff0c;即高级查询部分 分类 DML &#…
阅读更多...
Python 机器学习实战：基于 Scikit-learn

Python 机器学习实战：基于 Scikit-learn

本文围绕《Python 机器学习实战&#xff1a;基于 Scikit-learn 的项目开发》展开&#xff0c;先介绍 Scikit-learn 库的基础特性与优势&#xff0c;再阐述机器学习项目开发的完整流程&#xff0c;包括数据收集与预处理、模型选择与训练、评估与优化等。通过具体实战案例&#x…
阅读更多...
java里List链式编程

java里List链式编程

java里对list的操作&#xff0c;我们一遍使用for遍历&#xff0c;输出或改变里面的内容。单经常在代码里面我们发现&#xff0c;也可以使用这样的代码结构daPaymentActionVo.setApnolist(paymentActionVo.getApnolist().stream().map(PaymentActionVo.Voucher::getApno).collec…
阅读更多...
【esp32s3】7 - VSCode + PlatformIO + Arduino + 构建项目

【esp32s3】7 - VSCode + PlatformIO + Arduino + 构建项目

一、PlatformIO 1.1. 概述 官方文档&#xff1a;What is PlatformIO? PlatformIO 是一个跨平台的物联网开发生态系统&#xff0c;专门为嵌入式系统开发设计&#xff0c;支持多种开发板和框架。 1.1.1. 主要特点 跨平台&#xff1a;支持 Windows、macOS 和 Linux多框架支持&…
阅读更多...
LE AUDIO CIS/BIS音频传输时延的计算

LE AUDIO CIS/BIS音频传输时延的计算

LE AUDIO音频总时延计算方法 按照BAP的规范，LE AUDIO音频总延时包括三个部分：Audio Processing Time，Transport Latency，Presentation Delay。如下图所示是播放音乐的示例图： 这里还有一个麦克风录音的总时延示例图： Audio Processing Time：这个就是音频DSP获取音频数…
阅读更多...
git 修改 更新

git 修改 更新

git 修改 更新先更新&#xff0c;后修改# 暂存当前修改 git add . git stash# 获取最新的 main 分支 git checkout main git pull# 新建开发分支 git checkout -b lbg_0727# ⚠️ 先把 main 的最新代码合并/变基到当前分支&#xff08;用于消除冲突&#xff09; # 方法1&#x…
阅读更多...
飞鹤困局：增长神话的裂痕

飞鹤困局：增长神话的裂痕

增长天花板已然逼近&#xff0c;飞鹤需要探寻新方向。作者|安德鲁编辑|文昌龙“飞鹤&#xff0c;更适合中国宝宝体质”——这句曾让无数妈妈点头的广告语&#xff0c;帮飞鹤坐上了中国奶粉市场的头把交椅。可多年后&#xff0c;时代红利退潮&#xff0c;故事不好讲了。飞鹤的利…
阅读更多...
Java设计模式之＜建造者模式＞

Java设计模式之＜建造者模式＞

目录 1、建造者模式 2、建造者模式结构 3、实现 4、工厂模式对比 5、适用场景差异 前言 建造者模式是一种创建型设计模式。用于封装复杂对象的构建过程&#xff0c;通过步骤构建产品类。它包括产品类、抽象建造者、具体建造者和指挥者角色。 优点在于灵活性、解耦和易扩展…
阅读更多...
fchown/fchownat系统调用及示例

fchown/fchownat系统调用及示例

55. fchmod - 通过文件描述符改变文件权限 函数介绍 fchmod是一个Linux系统调用&#xff0c;用于通过文件描述符来改变文件的访问权限。它是chmod函数的文件描述符版本&#xff0c;避免了路径名解析。 函数原型 #include <sys/stat.h> #include <unistd.h>int fchm…
阅读更多...
20250726-5-Kubernetes 网络-Service 代理模式详解（iptables与ipvs)_笔记

20250726-5-Kubernetes 网络-Service 代理模式详解（iptables与ipvs)_笔记

一、服务三种常用类型  1. LoadBalancer类型 工作原理：与NodePort类似，在每个节点上启用端口暴露服务，同时Kubernetes会请求底层云平台（如阿里云、腾讯云、AWS等）的负载均衡器，将每个Node([NodeIP]:[NodePort])作为后端添加。 自动化实现：云厂商通过官方实现的控制…
阅读更多...
horizon置备出错

horizon置备出错

报错内容如下&#xff1a; [2025/7/28 19:15] 置备 Customization failure: Customization of the guest operating system is not supported due to the given reason: 期间出错 解决方法&#xff1a;将模板转换为虚拟机&#xff0c;安装vmtools&#xff1b;再安装vmtools之后…
阅读更多...
【unitrix】 6.19 Ord特质（ord.rs)

【unitrix】 6.19 Ord特质（ord.rs)

一、源码 这段代码定义了一个标记特征&#xff08;marker trait&#xff09;Ord 和三个实现&#xff0c;用于将类型标记与 Rust 标准库中的 Ordering 枚举关联起来。 use crate::sealed::Sealed; use core::cmp::Ordering; use crate::number::{Greater, Equal, Less}; /// 用于…
阅读更多...
最新文章

Copyright @ 2022~2023