Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail


Ответ
 
Опции темы
Старый 09.08.2017, 11:12   #1
0x0000
Новичок
Джуниор
 
Регистрация: 09.08.2017
Сообщений: 1
По умолчанию Подскажите с flexbox

Пытаюсь разобраться в flexboxe.
Столкнулся с непонятным поведением.

Блок (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;
  }
Но получаются не равные:



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

Что я делаю не так?
0x0000 вне форума Ответить с цитированием
Старый 10.08.2017, 15:10   #2
niggagang
Новичок
Джуниор
 
Регистрация: 10.08.2017
Сообщений: 1
По умолчанию

тебе надо прописывать margin для обеих строковых вырвниваний, чтобы подмена классов происходило равномерно и вообще лучше вместо flex использовать cloud.
niggagang вне форума Ответить с цитированием
Старый 09.09.2017, 18:46   #3
gryllus
Пользователь
 
Регистрация: 27.08.2017
Сообщений: 99
По умолчанию

Я тоже недавно изучал flexbox. Оставляю ссылку, почитайте и всё у вас встанет на свои места. Если хотите одинаковыми жёлтое и зелёное поля то используйте flex-basis с одинаковыми или какими вам угодно постоянными значениями, px, em, %.
Стили надо писать в CSS, а не в HTML, валидатор ругаться будет, перенёс ваш background в файл со стилями ( в html убрал) всё прекрасно работает.
http://css-live.ru/articles/flex-gro...ak-li-eto.htmlС Наилучшими пожеланиями!
gryllus вне форума Ответить с цитированием
Ответ

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не получается структурировать вёрстку с помощью flexbox. Подскажите как решить данную проблему skander47 HTML и CSS 0 20.12.2016 18:21
Не Подскажите? Arxangelname Общие вопросы Delphi 3 04.10.2009 21:07
Подскажите Dissonance БД в Delphi 4 19.06.2008 10:40
Подскажите Yana Общие вопросы Delphi 2 23.12.2007 01:21