Новичок в Flexbox и пытаюсь понять, как это работает. У меня есть песочница кода моего React / код начальной загрузки ... Я создаю компонент часов, и у него будут две кнопки (одна для увеличения времени, другая для уменьшения). Вот изображение:

enter image description here

Я хотел бы сохранить высоту этого компонента, поскольку он идеально подходит для меня на данный момент, однако я хотел бы добавить три ряда кнопок (Пуск, Пауза, 1-й) в отдельном столбце рядом с этим. Я бы хотел, чтобы этот второй столбец обернулся и соответствовал высоте часов слева. Однако вот что я получаю:

enter image description here

Я пробовал создать два гибких бокса, но я не уверен, как заставить один ссылаться на высоту другого и изменять размер как таковой. Как мне это сделать?

0
clattenburg cake 18 Сен 2021 в 08:02

2 ответа

Лучший ответ

Этого легко добиться, используя flexbox.

Как вы можете видеть в приведенном ниже фрагменте. Я воссоздал ваше требование.

Но кнопки вверх / вниз в настоящее время даны с промежутком между ними, чтобы выровнять то же самое с крайними правыми кнопками (3 кнопки).

Если вы хотите заполнить 2 кнопки все пространство, вы можете задать отступ для этих кнопок, чтобы они соответствовали столбцу с 3 кнопками.

* {
  box-sizing: border-box;
}

.wrapper,
.clock-wrapper,
.action-wrapper,
.btn-wrapper {
  display: flex;
}

.btn-wrapper button {
  padding: 5px 10px;
}

.action-wrapper,
.btn-wrapper {
  flex-direction: column;
  justify-content: space-between;
}

input {
  height: 100%;
  font-size: 30px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
<div class="wrapper">
  <section class="clock-wrapper">
    <div class="btn-wrapper">
      <button>Up</button>
      <button>Down</button>
    </div>
    <div>
      <input type="text" value="10:35" />
    </div>
    <div class="btn-wrapper">
      <button>Up</button>
      <button>Down</button>
    </div>
  </section>
  <section class="action-wrapper">
    <button>Start</button>
    <button>Reset</button>
    <button>1st</button>
  </section>
</div>
1
Abin Thaha 18 Сен 2021 в 05:17
.btns-column button {
  height:50%
}

Добавьте это, если вы хотите выровнять кнопки вверх и вниз по высоте часов,

'btns-column' имеет высоту по flexbox, вы все сделали правильно, но кнопки должны обернуть высоту 'btns-column'

1
bibin antony 18 Сен 2021 в 05:24