代码之家 › 专栏 › 技术社区 › Dimitri Kopriwa

两列布局:第一列固定宽度,第二列占用剩余空间

flexbox css3 css html

Dimitri Kopriwa · 技术社区 · 6 年前

我想有两列,第一列是 width: 3rem ,第二个具有剩余宽度。

另外,我希望文本转到下一行,如何使用 flexbox

.d-flex {
  display: flex !important;
}
.d-inline-block {
  display: inline-block;
}
.text-primary {
  color: white;
}

h2:first-of-type {
 background: blue;
 flex: 0 0 3rem;
}

h2:last-of-type {
  background: red;
  flex: 1;
}

<div class="d-flex">
  <H2 class="text-primary">1&nbsp;/&nbsp;</H2>
  <div>
    <H2>Hello World</H2>
    <P>Lorem ipsum dolor sit amet, consectetur adipiscing 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</P>
  </div>
</div>

1 回复 | 直到 6 年前

Michael Benjamin William Falcon 6 年前

div {
  display: flex;
}

h2:first-of-type {
  flex: 0 0 3rem;  /* flex-grow, flex-shrink, flex-basis */
  background: blue;
}

h2:last-of-type {
  flex: 1;         /* fg: 1, fs: 1, fb: 0 */
  background: red;
}

.text-primary {
  color: white;
}

<div>
  <h2 class="d-inline-block text-primary">1 / </h2>
  <h2 class="d-inline-block">Hello world</h2>
</div>

<div>
  <h2 class="d-inline-block text-primary">1 / </h2>
  <h2 class="d-inline-block">Hello world Hello world Hello world Hello worldHello worldHello worldHello worldHello worldHello world</h2>
</div>