пример сетки с использованием flexbox.

Question

Я хочу добиться этого с помощью Flexbox:

1. текстовое поле должно оставаться фиксированным с перевалы = "15".
2. Используйте только один контейнер из гибкой коробки или минимально возможно.
3. Меньше дополнительных возможностей div.

/*Basic Grid Styles*/ 
 
.grid { 
 
    display: flex; 
 
    flex-flow: column; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    width:600px; 
 
    height: 300px; 
 
} 
 
.grid-cell{ 
 
\t height:300px; 
 
}

<form action="" method="post"> 
 
<div class="grid"> 
 
<textarea rows="20" cols="15" name="" class="grid-cell"></textarea> 
 
<div class="grid-cell"> 
 
<input type="submit" value="10 >>> 13" name="submit_a" class=""/> 
 
<input type="submit" value="10 <<< 13" name="submit_b" class=""/> 
 
</div> 
 
<textarea rows="20" cols="15" name="" class="grid-cell"></textarea> 
 
</form>

Answer 1

Правильно, выровнены и кнопки расположены так, как вы хотите.

/*Basic Grid Styles*/ 
 
.grid { 
 
    display: flex; 
 
    -ms-flex-align: center; /* IE */ 
 
    -webkit-align-items: center; /* Chrome/Safari */ 
 
    -webkit-box-align: center; /* Chrome/Safari */ 
 
    align-items: center; /* standard */ 
 
    justify-content: center; 
 
    width:600px; 
 
    height: 300px; 
 
} 
 

 
.grid-cell { 
 
margin : 5px 20px; 
 
}

<form action="" method="post"> 
 
    <div class="grid"> 
 
    <textarea rows="20" cols="15" name="" class="grid-cell"></textarea> 
 
    <div class="grid-cell"> 
 
     <input type="submit" value="10 >>> 13" name="submit_a" class=""/><br/><br/> 
 
     <input type="submit" value="10 <<< 13" name="submit_b" class=""/> 
 
    </div> 
 
    <textarea rows="20" cols="15" name="" class="grid-cell"></textarea> 
 
    </div> 
 
</form>

Answer 2

Просто используйте align-items с префиксами поставщика на резервном, и удалить высоту на средней емкости (для достижения идеального и автоматического вертикального центрирования)

/*Basic Grid Styles*/ 
 
.grid { 
 
    display: flex; 
 
    -ms-flex-align: center; /* IE */ 
 
    -webkit-align-items: center; /* Chrome/Safari */ 
 
    -webkit-box-align: center; /* Chrome/Safari */ 
 
    align-items: center; /* standard */ 
 
    justify-content: center; 
 
    width:600px; 
 
    height: 300px; 
 
}

<form action="" method="post"> 
 
    <div class="grid"> 
 
    <textarea rows="20" cols="15" name="" class="grid-cell"></textarea> 
 
    <div class="grid-cell"> 
 
     <input type="submit" value="10 >>> 13" name="submit_a" class=""/> 
 
     <input type="submit" value="10 <<< 13" name="submit_b" class=""/> 
 
    </div> 
 
    <textarea rows="20" cols="15" name="" class="grid-cell"></textarea> 
 
    </div> 
 
</form>