flex：1

每天吃饭的羊

已于 2024-07-25 11:01:23 修改

阅读量465

点赞数 8

分类专栏： # css 文章标签：前端 javascript html

于 2024-07-25 10:45:42 首次发布

本文链接：https://blog.csdn.net/m0_47999208/article/details/140680355

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.flex-grow:1,

现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，

上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);

如何让下面盒子的子盒子高度适应外部的高度呢？

答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。

2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      border: 1px solid black;
      /* 较窄的容器，不足以容纳两个子元素 */
      overflow: hidden;
      /* 隐藏超出容器的内容 */
    }

    .item {
      background-color: lightblue;
      padding: 10px;
      margin: 5px;
    }

    .no-shrink {
      flex-shrink: 0;
      /* 不缩小 */
    }

    .shrink {
      flex-shrink: 1;
      /* 默认值，可以缩小 */
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item no-shrink">No Shrink (Short)</div>
    <div class="item shrink">Shrink (Long Text to Demonstrate Shrink)</div>
  </div>
</body>

</html>

3.flex-basis:0% 表示元素应该尽可能地小，以便分配额外空间

flex-basis:100%表示他占比整个宽度的100%

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      border: 1px solid black;
      overflow: hidden;
      /* 隐藏超出容器的内容 */
    }

    .item {
      background-color: lightblue;
      padding: 10px;
      margin: 5px;
      /* box-sizing: border-box; */
      /* 包含内边距和边框在总宽度中 */
    }

    .half-width {
      flex-basis: 100%;
      /* 占用容器宽度的一半 */
    }

    .fixed-width {
      flex-basis: 20px;
      /* 固定宽度 */
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item half-width">Half Width Item (50%)</div>
    <div class="item fixed-width">Fixed Width Item (200px)</div>
  </div>
</body>

</html>

4.flex: 1; 是一个非常常用的简写属性，用于在 Flexbox 布局中使子元素自动填充容器的可用空间,

每个 .nav-item 都设置为 flex: 1;，这意味着它们将自动填充 .navbar 中的剩余空间，并且在容器宽度变化时等分空间。

flex-grow: 1; - 定义了元素如何分配额外的空间。如果所有子元素都有相同的正数 flex-grow 值，它们将会平均分配剩余空间。
flex-shrink: 1; - 定义了元素如何减少其大小以避免溢出。在这个上下文中，1 是一个默认值，表示元素可以缩小。（但是会造成高度的变化，属于flex的默认属性）
flex-basis: 0%; - 定义了元素在分配额外空间前的初始大小。0% 表示元素应该尽可能地小，以便分配额外空间。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .navbar {
      display: flex;
      /* 分布子元素 */
      padding: 10px;
      background-color: #f0f0f0;
      border: 1px solid black;
    }

    .nav-item {
      flex: 1;
      /* 自动填充剩余空间 */
      background-color: #ddd;
      padding: 10px 20px;
      margin: 5px;
      border: none;
      cursor: pointer;
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <div class="navbar">
    <button class="nav-item">Home</button>
    <button class="nav-item">About</button>
    <button class="nav-item">Contact</button>
  </div>
</body>

</html>

每天吃饭的羊

关注

8
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
flex：1

2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
复制链接

扫一扫