Отображение двух кнопок подряд с помощью flexbox и выравнивания элементов управления - PullRequest
Новая
       3

Отображение двух кнопок подряд с помощью flexbox и выравнивания элементов управления

0 голосов
/ 25 мая 2020

Якобы у меня есть кнопки, хочу вывести эти кнопки по 2 в ряд. Я не уверен, как я могу отображать кнопки с указанной шириной c в 2 строки и иметь элемент управления для отображения их слева, по центру или справа. Желаемый результат будет примерно таким:

enter image description here

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.button {
  width: 190px;
  border: 1px solid red;
}
<div class="container">
  <button class="button">1</button>
  <button class="button">2</button>
  <button class="button">3</button>
  <button class="button">4</button>
</div>

Ответы [ 2 ]

0 голосов
/ 25 мая 2020

Вы можете присвоить дочерним элементам flex: 0 50%. Это может заставить его расположить по 2 элемента в строке. 

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 20rem;
  /* Aligning elements left, center and right in flexbox */
  /* float: left; */
  margin: auto;
  /* float: right; */
}

.button {
  border: 1px solid red;
}

.container>button {
  flex: 0 50%;
}
<div class="container">
  <button class="button">Button 1</button>
  <button class="button">Button 2</button>
  <button class="button">Button 3</button>
  <button class="button">Button 4</button>
</div>
0 голосов
/ 25 мая 2020

А ширину контейнера можно установить? Затем установите для параметра margin-left / margin-right значение auto, чтобы выровнять кнопки? 

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.button {
  width: 190px;
  border: 1px solid red;
}
<div class="container">
  <button class="button">1</button>
  <button class="button">2</button>
  <button class="button">3</button>
  <button class="button">4</button>
</div>
...