0

Здравствуйте. Начал разбираться с flexbox, столкнулся со следующим.

Блок (block), внутри него элементы (item), расположенные по вертикали, внутри элемента два элемента (left-subitem и right-subitem), расположенные горизонтально и должны быть равные по ширине, т.к. у обоих flex-grow: 1;

<div class="block">

  <div class="item">
    <div class="left-subitem" style="background-color: yellow;">
      str1
    </div>
    <div class="right-subitem" style="background-color: lime;">
      str2 str2 str2
    </div>
  </div>

</div>


.block
  {
  display: flex;
  flex-direction: column;
  width: 600px;
  margin: auto;
  margin-top: 50px;
  border: 1px solid #cbcbcb;
  }

.item
  {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  }

.left-subitem
  {
  flex-grow: 1;
  text-align: right;
  }

.right-subitem
  {
  flex-grow: 1;
  }

Но получаются не равные: введите сюда описание изображения

Элемент, в котором длинее текст (зеленый) получается длиннее. Что я делаю не так?

1 ответ 1

1

Вместо flex-grow:1; нужно flex:1; или flex-grow:1; flex-shrink:1; вот здесь можно почитать про свойство flex-shrink https://webref.ru/css/flex-shrink

.block
  {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: auto;
  margin-top: 50px;
  border: 1px solid #cbcbcb;
  }

.item
  {
  flex:1;
  display: flex;
  flex-direction: row;
  align-items: center;
  }

.left-subitem
  {
  flex:1;
  text-align: right;
  }

.right-subitem
  {
  flex:1;
  }
<div class="block">

  <div class="item">
    <div class="left-subitem" style="background-color: yellow;">
      less
    </div>
    <div class="right-subitem" style="background-color: lime;">
      moooooooooooooooooooore
    </div>
  </div>

</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.