Задать вопрос
@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 что бы такое получилось?
  • Вопрос задан
  • 1740 просмотров
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
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Кастомизация модуля sale интернет-магазина на 1С Битрикс
26 апр. 2024, в 11:07
1000 руб./в час
Настройка шаблона (или темы) WP/
26 апр. 2024, в 11:02
2000 руб./за проект
Повысить оригинальность работы с 14% до 70%
26 апр. 2024, в 10:59
1700 руб./за проект
Ещё заказы