Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 09.08.2017, 10: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, 14:10   #2
niggagang
Новичок
Джуниор
 
Регистрация: 10.08.2017
Сообщений: 1
По умолчанию

тебе надо прописывать margin для обеих строковых вырвниваний, чтобы подмена классов происходило равномерно и вообще лучше вместо flex использовать cloud.
niggagang вне форума Ответить с цитированием
Старый 09.09.2017, 17: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 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


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