我試圖將一個標簽與一個文本輸入對齊，并讓它們在一個可變寬度的flex容器中保持在同一行。如果我把容器變小，比如200像素，它會把輸入包起來。把容器做成400px寬，不換行。我不知道為什么輸入會換行，但是如果我把它的寬度設置得小一些，比如說100像素，它就會停止換行。我做不到。我需要換行的原因是第三個元素需要總是換行到下一行。

我不能改變HTML的結(jié)構(gòu)。

#test {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}

#test label {
  border-bottom: 1px solid black;
}

#test input {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid black;
  flex-grow: 1;
  line-height: 18px;
  min-width: 0;
  /* width: 100px; */
}

<div id="test">
  <label>Label text:</label><input type="text" value="Stay inline!" />
  <span>Third element to wrap to next line.</span>
</div>

# # #可以試試CSS網(wǎng)格。

#test {
  width: 200px;
  display: grid;
  grid-template-columns: max-content auto;
  grid-template-areas:
    "label input"
    "text text";
}

#test label {
  border-bottom: 1px solid black;
  grid-area: label;
}

#test input {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid black;
  line-height: 18px;
  grid-area: input;
}

#test span {
  grid-area: text;
}

<div id="test">
  <label>Label text:</label>
  <input type="text" value="Stay inline!" />
  <span>Third element to wrap to next line.</span>
</div>

# # #我發(fā)現(xiàn)了一個非網(wǎng)格的解決方案:你可以為輸入設置width: 0，同時保持它的flex-grow: 1。要使第三個元素換行，將flex-basis設置為100%,并防止它收縮/增長。

#test input {
  width: 0;
}

#test span {
  flex: 0 0 100%;
}

請注意，如果#test的寬度小于label的寬度，這將不起作用。

試試看:

#test input {
  width: 0;
}

#test span {
  flex: 0 0 100%;
}

/* Original styles */

#test {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}

#test label {
  border-bottom: 1px solid black;
}

#test input {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid black;
  flex-grow: 1;
  line-height: 18px;
}

<div id="test">
  <label>Label text:</label>
  <input type="text" value="Stay inline!" />
  <span>Third element to wrap to next line.</span>
</div>

# # #您有3個元素，flex wrap適用于所有元素，允許它們四處移動。如果你想讓輸入和標簽保持一致，你必須把它分組。

在某些點上，標簽和輸入將被#test div的大小強制到堆棧中，為了避免這種情況并強制它們溢出#test，您可以應用display: flex而不允許換行。以下是我的實現(xiàn):

#test {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}

#test label {
  border-bottom: 1px solid black;
}

#test input {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid black;
  flex-grow: 1;
  line-height: 18px;
 width: 200px;
}

.form-field{
  display:flex;
}

<div id="test">
 <div class="form-field"> <label>Label text:</label><input type="text" value="Stay inline!" /></div>
  <span>Third element to wrap to next line.</span>
</div>

# # #正常使用顯示:flex，但對于span，您可以使用flex flex:1 1 100%；..對于輸入，給它一個寬度，比如寬度:100像素；使用flex-grow或更少:1；

#test {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}

#test label {
  border-bottom: 1px solid black;
}

#test input {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid black;
  flex-grow: 1;
  line-height: 18px;
  box-sizing : border-box;
  width: 100px;
}
#test span{
  flex : 1 1 100%;
}

<div id="test">
  <label>Label text:</label><input type="text" value="Stay inline!" />
  <span>Third element to wrap to next line.</span>
</div>