• 0
viliksar

Модульная сетка на flex

Вопрос

Используя flex хочу построить сетку с модулями (скрин)

Скрытый текст

0cb52fd32e5069bea35d32b167fff7d5.jpg

пробовал изменять расположения вдоль главной и поперечной оси, не смог добиться расположения как на скрине

код здесь - https://codepen.io/viliksar/pen/dKvZgV?editors=1100

Изменено пользователем viliksar

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

  • 0

Размеры сами подставите

<div class="container">
   <div class="column header"></div>
   <div class="row">
      <div class="column column1">1</div>
      <div class="wrap">
        <div class="column column2">2</div>
        <div class="column column3">3</div>
        <div class="column column4">4</div>
      </div>
   </div>
  <div class="column footer"></div>
</div>
.container {
  width: 600px;
  min-height: 230;
}

.column {
  height: 90px;
  padding: 20px;
  border: 1px solid black;
  box-sizing: border-box;
}
.column2{
  width: 100%;
}
.column3, .column4{
  width: 50%;
}
.row {
  display: flex;
  justify-content: space-between;
}
.wrap{
  display: flex;
  flex-wrap:wrap;
}

.header {
  padding: 20px;
  height: 40px;
  margin-bottom: 5px;
}

.footer {
  padding: 5px;
  height: 20px;
  margin-top: 5px;
}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Спрашивают сейчас

  • Пишут сейчас

    • Есть несколько вариантов которые позволяют развиваться профессионально: Ask friend for help. Опросить друзей знакомых на предмет предлагаемых услуг, заявить о себе. Выполнить несколько простых проектов для опыта/портфолио. Тем самым продвигать себя в качестве специалиста (сарафанное радио) Freelance. Вход сложный. Зато на мелочах можно поднять опыт за символическую стоимость. Потом развивать свой аккаунт, "обрастать" клиентами и поднимать уровень квалификации. Важно: почитайте пару гайдов как получить заказ новичку, как оформить профиль и прочие рекомендации. Сайты по теме: https://freelansim.ru https://www.fl.ru https://www.upwork.com — я бы выбрал этот Remote. Full-time. Ещё один хороший вариант найти работу — утроится в компанию работать удалённо. Без территориально ограничения. Компания может быть из СНГ, с юр. лицом. Заключаете договор и сотрудничаете на ставку. Part-time. Тоже самое что и предыдущий пункт но формат сотрудничества на правах почасовой работы. Office. Работа в офисе на позции Junior с перспективой роста. Хорошо подойдут галеры по типу ЕПАМ, Ciklum, LuxSoft, и тд. Денег мало (в начале), но компенсируется опытом. За 9-12 месяцев можете вырасти в Middle. Дальше плыть будет легче. Для поиска работы для Remote и Office вариантов можно использовать стандартные инструменты, на пример: djinni.co или linkedin.com. Рекомендации к заполнению профилю/CV Опишите всё что можете предложить заказчику. Расскажите о своих скилах, что непосредственно Вы делали выполняя работу над тем или иным проектом. Расскажите о своём опыте, даже если он не значительный. Если опыта совсем мало, инвестируйте месяц-два и выполните несколько простых задач, которые Вы сможете показать заказчику. И профиль и CV должно быть на английском языке, в первую очередь, и лишь копия русскоязычная (у меня такой нет, так как рынок предполагает знание английского языка с уровня pre-intermediate)
    • Сидеть дома и развиваться до уровня Senior годами без реальной работы?! 
    • Факт есть факт — специалистов как было мало так и осталось. Можно выбирать любую интересующую себя нишу и развиваться в ней до уровня Senior и иметь на себя спрос в последствии.
  • Лучшие авторы

  • Текущие цели пожертвований