Question

我有一个包含4个元素的flexbox容器。

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

我想像这样定位项目：

┌────────────────────┬────────┐
│ FIRST item has     │ SECOND │
│ longer multi-line  │        │
│ text content       │        │
├────────────────────┴────────┤
│ THIRD                       │
├─────────────────────────────┤
│ FOURTH                      │
└─────────────────────────────┘

因此，对于3 ^rd和4 ^th，通过设置flex-basis: 100%可以很容易，这很好。

我遇到了1 ^st和2 ^nd项目的问题。

1 ^st项目有相当多的内容，因此当它不能适合单行时应该换行
2 ^nd项目应该包含非包装文本，并且应该根据内容的需要占用相应的水平空间。
1 ^st空间应占用所有剩余空间。

问题

我似乎无法使用flex-basis和flex-grow。如果我只设置1 ^st来增长而不是在宽度上约束它，它将把2 ^nd项包装到下一行。但是如果我限制它，那么根据2 ^nd项目的宽度调整其内容，这些wdth约束不能真正灵活。

Answer 1

我想你可以设置：

white-space: nowrap和flex: 0 1 auto代表第二个div，
flex: 1

见下面的演示：

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.container > div {
  border: 1px solid red;
}
.container div:nth-child(1) {
  flex:1;
}
.container div:nth-child(2) {
  white-space: nowrap;
  flex:0 1 auto;
}
.container div:nth-child(3),
.container div:nth-child(4) {
  flex-basis: 100%;
}

<div class="container">
  <div>FIRST itema has
    <br/>longer multiline longer multiline longer multiline longer multiline longer multiline longer multiline longer multiline 
    <br/>text content</div>
  <div>Some text content here and some more</div>
  <div>Some text</div>
  <div>Some text here</div>
</div>

Flexbox包装内容和调整大小

问题

1 个答案: