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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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