时间戳

首页 > 解决方案 > 有没有另一种方法可以让每个 div 在 flexbox 中保持 33% 的宽度？

css - 有没有另一种方法可以让每个 div 在 flexbox 中保持 33% 的宽度？

问题描述

* {
      margin:0;
    }
    #container {
      height:800px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      background-color:grey;
    }


    #box-1 {
      background-color:green;
      height:400px;
      flex:1
     

    }
    #box-2 {
      background-color:yellow;
      height:200px;
      flex:1;
    }
    #box-3 {
      background-color:pink;
      height:100px;
      flex:1;

    }
<body>

  <div id="container">
    <div id="box-1"></div>
    <div id="box-2"></div>
    <div id="box-3"></div>
  </div>
</body>

有人可以告诉我是否有另一种方法可以将每个 div 设置为 33% div，这样我就不需要在每次添加边距/填充时重新计算它？我想知道在学习 flexbox 时是否遗漏了什么。谢谢你。

标签： cssflexbox

解决方案

  • 如果您需要三个项目的 33%宽度（水平长度）div，则容器类需要flex-direction: row;而不是flex-direction: column;. 这三个div项目将平均填充设备宽度 (33.3%)
  • 如果您的意思是三个项目的 33%高度（垂直长度）div，您可以将flex-basis: 33.3%;属性添加到您的box类。

推荐阅读