CSS Flexbox у формі [дублікат] - html, css, css3, flexbox

Я хочу використовувати власну функцію display flex в Інтернетіщоб мати два текстові поля поруч і автоматично зростати, щоб заповнити простір. Я вирішив використовувати гнучкість над макетом таблиці, тому що я хочу, щоб вони переходили на свою лінію, коли вікно зменшувалося.

Я вважаю, що я не розумію, як використовувати flexbox.

Нижче наведено мою роботу (спрощена для розміщення тут). Я використовую fieldset як гнучкий батько, і кожен елемент форми, який повинен "рости" навпаки, вкладено в div (set to display: inline тому вони можуть бути на тій же лінії). У мене також є легенда про те, як встановлено поле display:block і width:100% так що вона буде на своїй лінії.

jsFiddle посилання

fieldset {
display: flex;
flex-direction: row;
justify-content: space-between;
border: none;
}

label {
display: none;
}

legend {
display: block;
width: 100%;
}

fieldset > div {
display: inline;
flex: 1 1 auto;
}

input {
width: 100%;
}

<form>
<fieldset>
<legend>These are Text Fields</legend>
<div>
<input type="text" id="text1">
<label for="text1">Text Field</label>
</div>
<div>
<input type="text" id="text2">
<label for="text2">More Text</label>
</div>
</fieldset>
</form>

Як ви можете бачити, divs є кожен на своїй лінії (незважаючи на display: inline і речі Flexbox). Якщо ви додаєте кордон до елементів div, ви побачите, що вони зараз мають ширину 100%, але навіть якщо ви вручну визначаєте ширину (наприклад, 30%), вони залишаються на своїй лінії.

Як я можу використовувати flex для відображення розділів div-side-by-side і дозволить їм масштабувати, щоб заповнити батьківську ширину?

Відповіді:

Дві речі тут:

1) Коли ти робиш display: flex на елемент, впливає кожен прямий дитина. Так що у вашому прикладі (якщо він працював) легенда буде також відображатися на одному рядку.

2) З будь-якої причини fieldset не хочеться грати добре з Flexbox. оскільки ви не хочете, щоб легенда опинилася на одній лінії, я б запропонував спеціально загортати елементи, які ви хочете бути на одному рядку.

<form>
<fieldset>
<legend>These are Text Fields</legend>
<div class="flex-wrapper">
<div>
<input type="text" id="text1">
<label for="text1">Text Field</label>
</div>
<div>
<input type="text" id="text2">
<label for="text2">More Text</label>
</div>
</div>
</fieldset>
</form>


fieldset {
border: none;
}

.flex-wrapper {

display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
}

.flex-wrapper > div {
flex: 1 1 auto;
}


label {
display: none;
}

legend {
display: block;
width: 100%;
}

input {
width: 100%;
}