flex-basis 的列边距为 33.33%？ [复制]

Posted 2023-03-05

【中文标题】flex-basis 的列边距为 33.33%？ [复制]

【英文标题】：Column margin with flex-basis 33.33%? [duplicate]

【发布时间】：2019-08-28 06:16:08

【问题描述】：

我正在尝试制作一个 4 行 3 列的数字键盘。我已经将 flexbox 与 flex-wrap 和 flex-basis: 33.33% 一起使用。

问题是我的列之间需要一些边距，但是一旦我像 margin: 0.5em 这样输入，它就会将一个项目向下推，使其每行只有 2 个。

填充不起作用，边距不起作用，边框不适用于我的透明背景。

.digit-grid 
  display: flex;
  flex-wrap: wrap;
  font-size: 2em;


.box 
  flex-basis: 33.33%;
  margin: 0.5em;
  background: gray;
  height: 50px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;

<div class="digit-grid">
   <div class="box box1">1</div>
   <div class="box box2">2</div>
   <div class="box box3">3</div>
   <div class="box box4">4</div>
   <div class="box box5">5</div>
   <div class="box box6">6</div>
   <div class="box box7">7</div>
   <div class="box box8">8</div>
   <div class="box box9">9</div>
   <div class="box box10">10</div>
   <div class="box box11">11</div>
   <div class="box box12">12</div>
</div>

【参考方案1】：

您可以在flex-basis 中使用calc 调整边距，例如calc(33.33% - 1em) - 请参见下面的演示：

.digit-grid 
  display: flex;
  flex-wrap: wrap;
  font-size: 2em;
  background: black;


.box 
  flex-basis: calc(33.33% - 1em);
  margin: 0.5em;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;

<div class="digit-grid">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
  <div class="box box6">6</div>
  <div class="box box7">7</div>
  <div class="box box8">8</div>
  <div class="box box9">9</div>
  <div class="box box10">10</div>
  <div class="box box11">11</div>
  <div class="box box12">12</div>
</div>

【讨论】：

谢谢！另外，我怎样才能使 .box 类成为一个完美的正方形？我尝试设置一个高度，但它变得扭曲了

对于正方形，试试这个：***.com/questions/29307971/…