我想要定位項(xiàng)目& quot內(nèi)嵌& quot在文本后面。當(dāng)它們換行時(shí)，應(yīng)該直接在文本下?lián)Q行。我不想改變HTML標(biāo)記，因?yàn)槲业膶?shí)際用例更復(fù)雜，不允許這樣做。有這種可能嗎？

.outer-container {
  background-color: lightgray;
  display: flex;
  flex-wrap: wrap;
}

.item-container {
  display: inline-flex;
  flex-wrap: wrap;
}

.text {
  border: 1px solid black;
}

.item {
  min-width: 200px;
  border: 1px solid black;
}

<div class="outer-container">
  <div class="text">Text</div>
  <div class="item-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</div>

你真的不需要flexbox或者任何復(fù)雜的布局。內(nèi)嵌流布局就足夠了

.outer-container {
  background-color: lightgray;
  font-size: 0; /* to disable the white space */
}

.item-container {
  display: inline; /* HERE */
}

.text {
  display: inline-block; /* HERE */
  border: 1px solid black;
  font-size: initial;
}

.item {
  display: inline-block; /* HERE */
  min-width: 200px;
  border: 1px solid black;
  font-size: initial;
}

<div class="outer-container">
  <div class="text">Text</div>
  <div class="item-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</div>

嘗試顯示:內(nèi)容

內(nèi)容 這些元素本身不會(huì)產(chǎn)生一個(gè)特定的盒子。它們被它們的偽盒和它們的子盒所取代。

.item-container {
  display: contents;
}

在項(xiàng)目容器上使用顯示內(nèi)容而不是flex。然后，外部容器中的flex會(huì)處理其子容器，就好像它們直接位于外部容器中一樣。

.outer-container {
  background-color: lightgray;
  display: flex;
  flex-wrap: wrap;
}

.item-container {
  display: contents;
   
  flex-wrap: wrap;
}

.text {
  border: 1px solid black;
}

.item {
  min-width: 200px;
  border: 1px solid black;
}

<div class="outer-container">
  <div class="text">Text</div>
  <div class="item-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</div>

.outer-container {
  background-color: lightgray;
  display: flex;
  width:600px;
}

.item-container {
  display: flex;
  flex-wrap:wrap;
  width:100%;
}

.text {
  border: 1px solid black;
  width:60px;
  height:30px;
}

.item {
  min-width: 170px;
  border: 1px solid black;
}

<div class="outer-container">
   
   <div class="item-container">
   <div class="text">Text </div>
     <div class="item">Item 1</div>
     <div class="item">Item 2</div>
     <div class="item">Item 3</div>
     <div class="item">Item 4</div>
     <div class="item">Item 5</div>
  </div>
 
</div>

事情是這樣的，外容器的兩個(gè)子容器按顯示來劃分:flex在哪里？如果去掉wrap屬性，文本將獲得全高:D。

唯一的解決方法是插入。文本項(xiàng)放入顯示的同一個(gè)容器:flex屬性如下:

body {
  font-family: sans-serif;
}

.outer-container {
  display: flex;
  flex-wrap: wrap;
}

.text {
  outline: 1px solid red;
  min-width: 10%;
}

.item {
  min-width: 30%;
  outline: 1px solid black;
}

<div class="outer-container">
    <div class="text">Text</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>