Flexbox中的3列网格

Question

我目前正在尝试为卡片创建一个3列网格布局，并想知道是否有办法在Flex Box中执行此操作。我想把Box 4放在Box 1下。

HTML代码：

  <div id="boxes">

    <div class="box">
      <h1>Box 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="box">
      <h1>Box 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="box">
      <h1>Box 3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="box">
      <h1>Box 4</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

  </div>

CSS代码：

#boxes {
  display:flex;
  flex-wrap:wrap;
  .box {
    flex:1;
    border:1px solid black;
  }
}

Answer 1

将.box元素和flex-basis的宽度设置为auto。 flex-basis属性定义在分配剩余空间之前元素的默认大小。 auto关键字表示“查看我的宽度或高度属性”。

如果您不希望最后一个元素占用可用空间flex-grow: 0，则会阻止元素增长，因此您的所有框都将具有相同的宽度。

您可以使用flex速记属性设置所有值（flex: 0 1 auto - 请注意这是flex的默认值），请参阅下面的演示：

＆＃13;

＆＃13;

#boxes {
  display: flex;
  flex-wrap: wrap;
}

#boxes .box {
  flex: 0 1 auto;
  width: calc(100% / 3);
  outline: 1px solid black;
}

＆＃13;

<div id="boxes">
  <div class="box">
    <h1>Box 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box">
    <h1>Box 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box">
    <h1>Box 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box">
    <h1>Box 4</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我还将border属性替换为outline，因为边框会增加宽度。

要了解有关Flexible Layout模块的更多信息，请阅读Chris Coyier’s excellent Guide to Flexbox。