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

最新推荐文章于 2025-06-13 16:01:26 发布

原创

最新推荐文章于 2025-06-13 16:01:26 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

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