Question

我正在使用以下CSS来获得快速的两列布局。左侧的div具有静态宽度，右侧的div填充剩余的可用空间：

.container {
  display: flex;
}

.left-column {
  width: 100px;
  background-color: red;
}

.right-column {
  width: calc(100% - 100px);
  background-color: cyan;
}

<div class="container">
  <div class="left-column">
    Lorum ipsum
  </div>
  <div class="right-column">
    Lorum ipsum
  </div>
</div>

这就像我期望的那样。不过，我没有使用flex属性在我的任何一个孩子div中完成此效果。这是完成我的双列布局的惯用，干净的方法，还是应该避免在不使用更多Flexbox功能的情况下使用display: flex？

Answer 1

在flex中执行此操作的更惯用的方法是使用flex-basis属性而不是宽度，并且您可以使用flex-grow而不是从100%移除一些宽度，这样就可以消耗可用空间。

＆＃13;

.container {
  display: flex;
}

.left-column {
  /*width: 100px;*/
  background-color: red;
  flex-basis: 100px;
}

.right-column {
  /*width: calc(100% - 100px);*/
  background-color: cyan;
  flex-grow: 1;
}

＆＃13;

<div class="container">
  <div class="left-column">
    Lorum ipsum
  </div>
  <div class="right-column">
    Lorum ipsum
  </div>
</div>

＆＃13;

Answer 2

您不需要在.right-column上定义固定宽度。您可以像使用flexbox一样动态制作它。

.right-column {flex: 1;background-color: cyan;}

现在它的工作原理相同。但不是在这里定义固定的100px {calc（100％ - 100px）}。你只定义flex：1，它将占用宽度的其余部分。

Thannks，

Answer 3

以下是一个示例：https://jsfiddle.net/sheriffderek/bo0ruwvm/

你可以使用静态宽度...有时候这是非常的 - 但我会使用flex-basis和grow / shrink属性来描述布局 - 而且总是使用

width: 100%; max-width: 400px;等一般模块和布局的情况。静态高度和宽度不是bueno。

标记

<section class='container'>
  <div class='side one'>
    one(left)
  </div>

  <div class='side two'>
    two(right)
  </div>
</section>

样式

.container {
  display: flex;
  border: 1px solid red;
}

.one {
  flex-basis: 100px; /* if possible be this width */
  /* you COULD just say width: 100px... */
  flex-shink: 0; /* if you DONT want it to ever shrink to fit */
  /* not nessesary in most cases */
  background: lightgreen;
}

.two {
  flex-grow: 1; /* fill available space */
  background: cyan;
}

在flex容器中使用静态宽度是否惯用？

3 个答案:

标记

样式