css flex布局 —— 项目属性 flex-basis

＊且听风吟

2024-04-23 帮助1人

flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

浏览器根据这个属性，计算主轴是否有多余空间。

语法

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟 width 或 height 属性一样的值（比如350px），则项目将占据固定空间。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .container {
      display: flex;
      margin: 0px auto;
      width: 300px;
      height: 100px;
      background-color: #e6e6e6;
    }
    .item {
      flex-basis: 50px;
      height: 50px;
    }
    .container div:nth-of-type(1) {background-color:coral;}
    .container div:nth-of-type(2) {background-color:lightblue;}
    .container div:nth-of-type(3) {background-color:khaki;}
    .container div:nth-of-type(4) {background-color:pink;}
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</body>
</html>

页面效果：
学新通

如果元素上同时设置了 width 和 flex-basis，那么 width 的值就会被 flex-basis 覆盖掉，实例：

    .item {
      width: 30px;
      flex-basis: 50px;
      height: 50px;
    }

页面效果：
学新通

可以看到，设置了 width: 30px; 和 flex-basis: 50px;， flex-basis 属性的优先级比 width 高，所以元素宽度还是 50px。

把宽度调整大一些，实例：

    .item {
      flex-basis: 100px;
      height: 50px;
    }

页面效果：
学新通

可以看到，项目元素被压缩显示了，缩小后项目的宽度是75px，4个刚好为300px，等于容器的宽度。

所以，设置了flex-basis，如果项目的总宽度超过容器的宽度，那么会缩小到容器范围内。

flex-basis 也可以指定其占据父元素的百分比，如下：

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .container {
      display: flex;
      margin: 0px auto;
      width: 300px;
      height: 100px;
      background-color: #e6e6e6;
    }
    .item {
      height: 50px;
    }
    .container div:nth-of-type(1) { flex-basis: 10%;background-color:coral;}
    .container div:nth-of-type(2) { flex-basis: 30%;background-color:lightblue;}
    .container div:nth-of-type(3) { flex-basis: 40%;background-color:khaki;}
    .container div:nth-of-type(4) { flex-basis: 10%;background-color:pink;}
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</body>
</html>

页面效果：
学新通

flex-basis ，默认值为 auto（根据内容自动调整大小），如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .container {
      display: flex;
      margin: 0px auto;
      width: 300px;
      height: 100px;
      background-color: #e6e6e6;
    }
    .item {
      height: 50px;
    }
    .container div:nth-of-type(1) { flex-basis: 10%;background-color:coral;}
    .container div:nth-of-type(2) { flex-basis: 30%;background-color:lightblue;}
    .container div:nth-of-type(3) { flex-basis: 40%;background-color:khaki;}
    .container div:nth-of-type(4) { flex-basis: auto;background-color:pink;}
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4 auto</div>
  </div>
</body>
</html>

页面效果：
学新通

这篇好文章是转载于：学新通技术网

css flex布局 —— 项目属性 flex-basis

语法

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

怎样阻止微信小程序自动打开

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐