將inline-flex元素調整為屏幕寬度

Question

在下圖中，您可以看到一個div（紅色背景），里面有三個div（綠色背景），每個都有一個標簽（藍色背景）和一個控件（輸入或復選框）。

在圖像中，您可以看到綠色的div如何適應屏幕尺寸，當它們達到最小尺寸並且不再適合它們向下移動時，問題是（如您在第三個窗口中看到的）由於它們的最小尺寸屬性，當它們處於不同的行中時，效果很糟，我要做的是使它們在向下移動時占據屏幕的100％。

我希望我能正確解釋。

順便說一句，我不想​​使用插件，因此，如果有一種僅使用HTML，CSS和Javascript做到這一點的方法，我將非常高興。

提前非常感謝您。

這是我的代碼：

 .controlRow { display: flex; flex-wrap: wrap; padding: 5px 0px; margin: 0px; background-color: Red; } .controlColumn1-2, .controlColumn1-4, .controlColumnCheckbox { display: inline-flex; background-color: green; } .controlColumn1-2 { width: 50%; min-width: 300px; } .controlColumn1-4 { width: 25%; min-width: 300px; } .controlColumnCheckbox { width: 230px; } .controlColumn1-2 label, .controlColumn1-4 label, .controlColumnCheckbox label { margin-right: 5px; min-width: 100px; background-color: blue; } .controlColumn1-2 input, .controlColumn1-4 input { margin-right: 5px; width: 100%; } .controlColumnCheckbox input { margin-left: 105px; margin-right: 5px; width: 14px; } 

 <div class = "controlRow"> <div class = "controlColumn1-4"> <label id="lblNombre">Nombre:</label> <input type="text" id="txtNombre" maxlength="100" /> </div> <div class = "controlColumn1-2"> <label id="lblDescripcion">Descripcion:</label> <input type="text" id="txtDescripcion" maxlength="100" /> </div> <div class = "controlColumn1-4"> <div class = "controlColumnCheckbox"> <input type="checkbox" id = "checkActivo" checked="checked" /> <label id="lblActivo">Activo.</label> </div> </div> </div> 

Answer 1

代替這個：

.controlColumn1-2  { width: 50%; min-width: 300px; }
.controlColumn1-4  { width: 25%; min-width: 300px; }

嘗試這個：

.controlColumn1-2 {  flex: 2 0 300px; }
.controlColumn1-4 {  flex: 1 0 300px; }

DEMO

在MDN上了解有關flex屬性的更多信息。

也是很好的參考： Flex的共同價值