当前位置： 首页 > news >正文

【前端基础】19、CSS的flex布局

news 2025/8/18 10:30:33

一、FlexBox概念

  • FlexBox翻译为弹性盒子。
    • 弹性盒子是一种用于按行或按列布局元素的一维布局方式。
    • 元素可以膨胀以填充额外的空间，收缩以适应更小的空间。
    • 我们使用FlexBox来进行布局的方案称为flex布局。

二、flex布局的重要概念

  • 两个重要的概念
    • 开启flex布局的元素叫做 flex container
    • flex container里面的子元素叫做 flex item
      在这里插入图片描述
  • 当 flex container 中的子元素变成 flex item 时，具备以下特点
    • flex item 的布局将受到 flex container 属性设置来控制和布局。
    • flex item 不再严格区分块元素和行内级元素。
    • flex item 默认情况下是包裹 内容的，但是可以设置宽度和高度。
  • 设置 display 属性为 flex 或者 inline-flex 可以为 flex container。
    • flex：flex container 以 block-level 形式存在。
    • inline-flex：flex container 以 inline-level 形式存在。
  • 案例1：设置 display 属性为 flex
<!DOCTYPE html>
<html><head><title>Document</title><style>.box {display: flex;background-color: aqua;}</style></head><body>AAA<div class="box"><div class="item">box1</div><div class="item">box2</div><div class="item">box3</div><div class="item">box4</div></div>BBB</body>
</html>

在这里插入图片描述

  • 案例2：设置 display 属性为 inline-flex
<!DOCTYPE html>
<html><head><title>Document</title><style>.box {display: inline-flex;background-color: aqua;}</style></head><body>AAA<div class="box"><div class="item">box1</div><div class="item">box2</div><div class="item">box3</div><div class="item">box4</div></div>BBB</body>
</html>

在这里插入图片描述

三、flex的布局模型

  • 默认以main axis 方向排序
    在这里插入图片描述
  • 应用在 flex container 上的 css 属性
    • flex-flow
    • flex-direction
    • flex-wrap
    • justify-content
    • align-items
    • align-content
  • 应用在 flex item 上的 css 属性
    • flex-grow
    • flex-basis
    • flex-shrink
    • order
    • align-self
    • flex

四、应用在 flex container 上的 css 属性

1、flex-direction

  • flex itsms 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布

    • flex-direction 决定了 main axis 的方向，有四个取值
      在这里插入图片描述

      • row（默认值）
        在这里插入图片描述

      • row-reverse：row的反转
        在这里插入图片描述

      • column：列成为主轴方向
        在这里插入图片描述

      • column-reverse：列主轴反转 在这里插入图片描述

<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;/* 修改主轴的方向 *//* flex-direction: row;  默认值 *//* flex-direction: row-reverse; *//* flex-direction: column; */flex-direction: column-reverse;}.item {width: 100px;height: 100px;background-color: aquamarine;}.item1 {background-color: orange;}.item2 {background-color: red;}.item3 {background-color: blueviolet;}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div><div class="item item4">box4</div></div></body>
</html>

2、flex-wrap

  • flex-wrap决定了 flex container 显示单行还是多行。
    在这里插入图片描述

    • nowrap：（默认值）单行
      在这里插入图片描述

    • wrap：多行
      在这里插入图片描述

    • wrap-reverse：多行（对比 wrap ，cross start 与 ）
      在这里插入图片描述

<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;/* 决定了  flex container 显示单行还是多行。 *//* flex-wrap: nowrap;默认值 *//* flex-wrap: wrap; */flex-wrap: wrap-reverse;}.item {width: 100px;height: 100px;background-color: aquamarine;}.item1 {background-color: orange;}.item2 {background-color: red;}.item3 {background-color: blueviolet;}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div><div class="item item4">box4</div><div class="item item1">box5</div><div class="item item2">box6</div><div class="item item3">box7</div><div class="item item4">box8</div></div></body>
</html>

3、flex-flow

  • flex-flow 属性是 flex-direction 和 flex-wrap 的缩写。
    在这里插入图片描述

    • 顺序任何，并且都可以省略在这里插入图片描述

4、justify-content

  • justify-content 决定了 flex item 在 main axis 上的对齐方式

    • flex-start：（默认值）与 main start 对齐
      在这里插入图片描述

    • flex-end：与 main end 对齐
      在这里插入图片描述

    • center： 居中
      在这里插入图片描述

    • space-between：

      • flex items 之间的距离相等
      • 与 main start 、 main end 两端对齐
        在这里插入图片描述

    • space-around：

      • flex items 之间的距离相等
      • flex items 与 main start 、 main end 之间的距离是 flex items 之间距离的一半
        在这里插入图片描述

    • space-evenly：

      • flex items 之间的距离相等
      • flex items 与 main start 、 main end 之间的距离是 flex items 之间的距离
        在这里插入图片描述
<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;/* justify-content 决定了 flex item 在 main axis 上的对齐方式 *//* justify-content: flex-start; 默认值 *//* justify-content: flex-end;  *//* justify-content: center; *//* justify-content: space-between; *//* justify-content: space-around; */justify-content: space-evenly;}.item {width: 100px;height: 100px;background-color: aquamarine;}.item1 {background-color: orange;}.item2 {background-color: red;}.item3 {background-color: blueviolet;}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div></div></body>
</html>

5、align-item

  • align-item 决定了 flex items 在 cross axis 上的对齐方式
    在这里插入图片描述

    • normal：弹性布局中，效果和 strench 一样
      在这里插入图片描述

    • stretch：当 flex items 在 cross axis 方向的 size 为 auto 时候，会自动拉伸至填充 flex container
      在这里插入图片描述

    • flex-start：与 cross start 对齐
      在这里插入图片描述

    • flex-end：与 cross end 对齐
      在这里插入图片描述

    • center：居中对齐
      在这里插入图片描述

    • baseline：于基准线对齐
      在这里插入图片描述

<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;align-items: normal;/* align-items: stretch; *//* align-items: flex-start; *//* align-items: flex-end; *//* align-items: baseline; */}.item {width: 100px;height: 100px;background-color: aquamarine;height: auto;}.item1 {background-color: orange;}.item2 {background-color: red;}.item3 {background-color: blueviolet;}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div></div></body>
</html>

6、align-content

  • align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法和 justify-content 类似
    在这里插入图片描述

    • stretch：（默认值），与 align-item 的 stretch 类似
      在这里插入图片描述

    • flex-strat：与 cross start 对齐
      在这里插入图片描述

    • flex-end：与 cross end 对齐
      在这里插入图片描述

    • center：居中对齐
      在这里插入图片描述

    • space-between：

      • flex items 之间的距离相等
      • flex items 与 cross start 和 cross end 对齐
        在这里插入图片描述

    • space-around：

      • flex items 之间的距离相等
      • flex items 与 cross start 和 cross end 之间的距离是 flex items 之间距离的一半
        在这里插入图片描述

    • space-evenly：

      • flex items 之间的距离相等
      • flex items 与 cross start 和 cross end 之间的距离 等于 flex items 之间的距离
        在这里插入图片描述
<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;flex-wrap: wrap;align-content: stretch;/* align-content: flex-start; *//* align-content: flex-end; *//* align-content: center; *//* align-content: space-between; *//* align-content: space-around; *//* align-content: space-evenly; */}.item {width: 120px;height: 120px;height: auto;background-color: aquamarine;}.item1 {background-color: orange;}.item2 {background-color: red;}.item3 {background-color: blueviolet;}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div><div class="item item4">box4</div><div class="item item1">box5</div><div class="item item2">box6</div><div class="item item3">box7</div><div class="item item4">box8</div><div class="item item1">box9</div><div class="item item2">box10</div><div class="item item3">box11</div><div class="item item4">box12</div></div></body>
</html>

五、应用在 flex item 上的 css 属性

1、order

  • order 决定了 flex item 的排列顺序
    在这里插入图片描述

    • 可以设置任意整数（正整数、负整数、0），值越小就越
    • 数字越小，位置越靠前；数字越大，位置越靠后
    • 默认值是 0
      在这里插入图片描述
<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;flex-wrap: wrap;}.item {width: 120px;height: 120px;background-color: aquamarine;}.item1 {background-color: orange;order: 2;}.item2 {background-color: red;order: 3;}.item3 {background-color: blueviolet;order: 1;}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div><div class="item item4">box4</div></div></body>
</html>

2、align-self

  • flex-items 可以通过 align-self 覆盖 flex container 设置的 align-items
    在这里插入图片描述

    • auto：遵从 flex container 设置的 align-items
      在这里插入图片描述

    • 可以设置的值，效果和 align-items 一致

      • stretch
        在这里插入图片描述

      • flex-start
        在这里插入图片描述

      • flex-end
        在这里插入图片描述

      • center
        在这里插入图片描述

      • baseline
        在这里插入图片描述

<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;}.item {width: 120px;height: 120px;background-color: aquamarine;}.item1 {background-color: orange;/* align-self: center; */}.item2 {background-color: red;/* align-self: auto; *//* align-self: stretch;height: auto; *//* align-self: flex-start; *//* align-self: flex-end; *//* align-self: center; */align-self: baseline;}.item3 {background-color: blueviolet;/* align-self: center; */}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div></div></body>
</html>

3、flex-grow

  • flex-grow 决定了 flex items 如何拓展（拉伸、增长）
    在这里插入图片描述

    • 可以设置任意非负数（正小数、正整数、0），默认值是 0
    • 当 flex container 在 main axis 上有剩余 size 时，flex-grow 才会生效
      在这里插入图片描述
      在这里插入图片描述
    • 如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 拓展的 size 为：flex container 的剩余 size * ( flex-grow / sum )
      在这里插入图片描述

  • flex items 拓展后的最终 size 不能超过 max-width / max-height

<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;}.item {width: 120px;height: 120px;background-color: aquamarine;}.item1 {background-color: orange;flex-grow: 2;}.item2 {background-color: red;flex-grow: 0.2;}.item3 {background-color: blueviolet;flex-grow: 0.5;}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div></div></body>
</html>

4、flex-shrink

  • flex-shrink 决定了 flex items 如何收缩（缩小）

    • 可以设置任意非负数（正小数、正整数、0），默认值是 1
    • 当 flex items 在 main axis 上 超过了 flex container 的 size 时，flex-shrink 才会生效
      在这里插入图片描述
      在这里插入图片描述

  • 如果所有 flex items 的 flex-shrink 总和 sum 超过 1，每个 flex item 收缩的 size 为： flex items 超出 flex container 的 size * 收缩比例（flex-shrink） / sum

  • flex items 收缩后的最终 size 不能超过 min-width / min-height

<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;}.item {width: 120px;height: 120px;background-color: aquamarine;/* flex-shrink: 0; */}.item1 {background-color: orange;}.item2 {background-color: red;flex-shrink: 5;}.item3 {background-color: blueviolet;}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div><div class="item item4">box4</div><div class="item item1">box5</div><div class="item item2">box6</div><div class="item item3">box7</div></div></body>
</html>

5、flex-basis

  • flex-basis 用来设置 flex items 在 main axis 方向上的 base size
    • auto：默认值
    • 具体的宽度数值（100px）
      在这里插入图片描述
  • 决定 flex-basis 最终 base size 的因素，优先级从高到低：
    • max-width、max-height、min-width、min-height
    • flex-basis
    • width、height
    • 内容本身的size
      在这里插入图片描述

6、flex属性

  • flex属性是 flex-grow、flex-shrink、flex-basis 的简写，flex 可以指定1个、2个或者3个值。
    在这里插入图片描述

  • 单值语法，值必须是以下其中之一：

    • 一个无单位数（<number>）：它会被当作 flex-grow 的值
      在这里插入图片描述

    • 一个有效宽度值（width）：它会被当作 flex-basis 的值

    • 关键字：none、auto或initial
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述

  • 双值语法，第一个值必须为一个无单位数（<number>），并且会被当作 flex-grow 的值

    • 第二个值必须是以下之一：
      • 一个无单位数，它会被当作 flex-shrink 的值
      • 一个有效宽度值（width）：它会被当作 flex-basis 的值
        在这里插入图片描述

  • 三值语法：

    • 第一个值必须是一个无单位数（<number>），并且它会被当作 flex-grow 的值
    • 第二个值必须是一个无单位数（<number>），并且它会被当作 flex-shrink 的值
    • 第三个值必须是一个有效宽度值（width），并且它会被当作 flex-basis 的值
      在这里插入图片描述
      在这里插入图片描述
<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;}.item {/* width: 120px; */height: 120px;background-color: aquamarine;}.item1 {background-color: orange;}.item2 {background-color: red;/* flex: auto; *//* flex: none; *//* flex: initial; *//* flex: 2; *//* flex: 0.5 200px; */flex: 0.6 1 10px;}.item3 {background-color: blueviolet;/* flex: 3; *//* flex: 15px; */}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div><div class="item item4">box4</div></div></body>
</html>

六、flex布局中使用justify-content后，最后一行的布局问题

1、问题

  • 想要的结果：
    在这里插入图片描述

  • 使用 justify-content: space-between; 后实际结果：
    在这里插入图片描述

2、解决方法

  1. 在最后追加 n 个 span 元素。n 的值 = 列数 - 2。
  2. 设置span元素的宽度 = flex item 的宽度

※ span 换成 i 元素也行。
在这里插入图片描述

<!DOCTYPE html>
<html><head><title>Document</title><style>.container {height: 500px;width: 500px;background-color: antiquewhite;margin: 0 auto;display: flex;flex-wrap: wrap;justify-content: space-between;}.item {width: 150px;height: 150px;background-color: aquamarine;}.item1 {background-color: orange;}.item2 {background-color: red;}.item3 {background-color: blueviolet;}.container span {width: 150px;}</style></head><body><div class="container"><div class="item item1">box1</div><div class="item item2">box2</div><div class="item item3">box3</div><div class="item item4">box4</div><div class="item item4">box5</div><div class="item item3">box6</div><div class="item item2">box7</div><div class="item item1">box8</div><!-- 列数- 2  = 追加的span个数 --><span></span></div></body>
</html>
http://www.lryc.cn/news/623821.html

相关文章：

  • 蓝凌EKP产品：JSP 性能优化和 JSTL/EL要点检查列表
  • rt-thread audio框架移植stm32 adc+dac，用wavplayer录音和播放
  • 【从零开始学习Redis】项目实战-黑马点评D2
  • scikit-learn/sklearn学习|多任务套索回归MultiTaskLasso解读
  • Windows_Server软件定义网络架构
  • 【Linux系列】如何在 Linux 服务器上快速获取公网
  • 每日两道算法题：DAY3
  • uniappx 安卓端本地打包的一些总结
  • 【位运算】查询子数组最大异或值|2693
  • CNV检测--单细胞空间vs基因组WGS/WES
  • AutoSar BSW介绍
  • 《Nursing Research》（护理 SCI）LaTeX 模板详细教程：从入门到投稿（二）
  • http工作流程
  • 数据电台询价的询价要求
  • 数据链路层（1）
  • FX10/20 (CYUSB401X)开发笔记5 固件架构
  • 基于Netty的高并发WebSocket连接管理与性能优化实践指南
  • prototype 和 _ _ proto _ _的关联
  • multiboot 规范实践分析
  • 交叉编译 手动安装 SQLite 库 移植ARM
  • Python数据分析案例82——基于机器学习的航空公司满意度分析
  • 攻防世界—unseping（反序列化）
  • pytorch线性回归
  • (一)React企业级后台（Axios/localstorage封装/动态侧边栏）
  • iSCSI服务配置全指南（含服务器与客户端）
  • JMeter(进阶篇)
  • LeetCode算法日记 - Day 13: 前缀和、二维前缀和
  • es下载、安装、部署以及集成和mysql数据同步
  • **守护进程（Daemon）** 是一种在后台运行的特殊进程
  • 为什么神经网络在长时间训练过程中会存在稠密特征图退化的问题