Задать вопрос
@rosolovsky
html

Трехколоночный макет на Flexbox?

Здравствуйте. Вникаю в Flexbox и возникла трудность с пониманием. Есть такой простой html-код, вернее это часть стандартного трехколоночного макета.
<main>
   <div class="nav">Nav</div>
   <div class="content">Content</div>
   <div class="aside">Aside</div>
</main>

При ширине браузера менее 800px надо перестроить блоки как на картинке.
8cf7f29457f84ce0a64db5174236d537.png
Как такое сделать на Flexbox не меняя структуры html? Или как изменить html что бы такое получилось?
  • Вопрос задан
  • 1743 просмотра
4 комментария
Подписаться 4 Оценить 4 комментария
Пригласить эксперта
Ответы на вопрос 2
dom1n1k
@dom1n1k
Задавал аналогичный вопрос: Как это сверстать?
Насколько я вижу, в общем случае "красивого" решения на флексе нет.
Нужно либо фиксировать высоту контейнера, либо изгаляться с костылями.
Ответ написан
3 комментария
3 комментария
@olbone
Я еще новичек в обучении ,но возможно такое решение подойдет. И да, я знаю ,что вопрос двухгодичной давности ,просто интересно найти решение .
<head> <meta charset ="utf-8">
 <title>таблица</title>
 <!--<link rel ="stylesheet" href ="style/li.css"> -->
 <style>
   *{ box-sizing: border-box;}
   main { display: flex; flex-direction: row; justify-content: space-around; margin: 0.5em; padding: 1em; background: #666;}
   .child { display: flex; flex-direction: column; justify-content: flex-start; padding: 1em; margin: 0.5em; background: #999;}
   .nav, .aside { padding: 1em; margin: 0.5em; background: #eee;}
   .content { flex: 0 0 60%;}
   
 </style>
</head>
<body>
   <main>
     <div class ="child content">
	 <p>Fusce viverra non diam eu mattis. Sed eget ipsum maximus, efficitur ipsum in, mollis dui. </p>
	 </div>
	 <div class ="child sidebar">
       <div class ="nav">
	   <p>Fusce viverra non diam eu mattis. Sed eget ipsum maximus, efficitur ipsum in, mollis dui. </p>
	   </div>
       <div class ="aside">
	   <p>Fusce viverra non diam eu mattis. Sed eget ipsum maximus, efficitur ipsum in, mollis dui. </p>
	   </div>
     </div>
   </main>	 
	 
    	 
	 
	 
    
</body>
</html>

5e04c0fe8679c895367577.png
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать дизайн приложений
22 дек. 2024, в 19:03
60000 руб./за проект
Веб-дизайн клининговой компании
22 дек. 2024, в 17:54
10000 руб./за проект
Нарисовать UX/UI дизайн для игры. Нарисовать несколько иконок для игры
22 дек. 2024, в 17:45
10000 руб./за проект
Ещё заказы