Как при помощи flexbox сделать страницу?

Question

tasadar2 @tasadar2

Как при помощи flexbox сделать страницу?

Как при помощи flexbox сделать страницу? Дело в том,что flex как я понял работает с контейнерами,тобишь группами блоков. Но вот как сделать,чтобы теги header, article,aside, footer можно было расположить по класической схеме тобишь aside с лева,article с по центру,опять aside с права,header на верху и footer в низу?

Вопрос задан более трёх лет назад
113 просмотров

2 комментария

Подписаться 1 Простой 2 комментария

Пригласить эксперта

Ответы на вопрос 2

3 комментария

tasadar2 @tasadar2 Автор вопроса

Но какому общему контейнеру,если есть только body header aside article aside footer ну и у них по одному блоку div. Тобишь эти главные теги нужно в div заворачивать? А так разве можно,это не против правил? Тогда какой смысл в этих тегах? Роботы смогут хоть понять,что это header.а это aside? Помоему всё же лучше float нет ничего. Легко управляется и работает с каждым элементом отдельно. А с этими сетками одна фигня какая-то. То html добавляет новые теги как нечто важное для поиска ,а тут получается они и роли никакой не играют,просто всё в div.-фигня какая-то нгепонятная.

Написано более трёх лет назад
азаза @natojezlo
tasadar2,
ну оберните эти блоки например в секцию
<body> <header></header> <section> <aside ></aside > <article ></article > </section> <footer ></footer >

section{ display:flex; flex-wrap: wrap; aside {width:70%;} article {width:30%;} }

и секции задайте флекс
а колонкам задайте соответствующие размеры в ширину
Написано более трёх лет назад
tasadar2 @tasadar2 Автор вопроса

natojezlo, Вроде получилось как надо.

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

Вёрстка

Средний
Как правильно вставлять изображения при наличии двух тем оформления сайта?
- 1 подписчик
- 6 часов назад
- 83 просмотра
1

ответ
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- вчера
- 75 просмотров
1

ответ
Вёрстка

Простой
В чем может быть проблема, верстка расплывается по экрану телефона?
- 4 подписчика
- 17 апр.
- 3764 просмотра
5

ответов
Вёрстка

Средний
Что использовать для современной автоматизации верстки?
- 1 подписчик
- 15 апр.
- 142 просмотра
2

ответа
Вёрстка

Простой
Можно ли сверстать макет без JavaScript?
- 3 подписчика
- 15 апр.
- 769 просмотров
3

ответа
HTML

+2 ещё

Средний
Как сделать такую верстку на гридах?
- 1 подписчик
- 11 апр.
- 118 просмотров
2

ответа
Вёрстка

Простой
Какой актуальный стек верстки 2024?
- 3 подписчика
- 10 апр.
- 1024 просмотра
3

ответа
Вёрстка

+1 ещё

Средний
Есть ли отслеживание страницы при вёрстке в GULP?
- 1 подписчик
- 10 апр.
- 64 просмотра
1

ответ
HTML

+2 ещё

Простой
Как сделать такой clip-path на задний фон?
- 1 подписчик
- 07 апр.
- 111 просмотров
0

ответов
HTML

+2 ещё

Средний
Как сделать колесо для текста css?
- 1 подписчик
- 04 апр.
- 123 просмотра
0

ответов
Показать ещё Загружается…

Frontend Vue & Capacitor Developer Middle++

Parasol Software

от 2 000 до 2 500 $

Frontend-стажер React

Студия Oxem • Москва

от 20 000 до 80 000 ₽

Frontend программист-разработчик

Максавит • Нижний Новгород

До 200 000 ₽

Поправить пхп скрипт

19 апр. 2024, в 16:53

1000 руб./за проект

Требуется настройка Яндекс Директа

19 апр. 2024, в 16:45

5000 руб./за проект

Разработать дизайн 3-х сайтов на Tilda

19 апр. 2024, в 16:22

30000 руб./за проект

Здесь так не принято, на советую обратить внимание на smart-grid by lavrik. Это набор примесей для любого из популярных препроцессоров. У тех кто много лет в веб разработке уже давно свои миксины для этих целей написаны, а для новичка готовые примеси из smart-grid хороший буст.
Потренироваться в flexbox можно здесь:
https://dmitrylavrik.ru/training/process/flexbox-grid
Там вроде и про smart-grid будет.
При такой раскладке флекс нужен только для центрального блока, чтобы aside и main встали рядом. Оберните их в контейнер.

Answer 1 · 2019-07-27 07:43:00

азаза @natojezlo

общему контейнеру задаете display:flex
дальше дело техники

Ответ написан более трёх лет назад

3 комментария

Answer 2 · 2019-07-27 08:30:10

Такое можно реализовать с помощью CSS Grid:
https://codepen.io/geoffgraham/pen/dZMYEO

Или же можно article и aside поместить в общий родительский блок и уже ему задать display: flex и позиционировать как угодно. Например как здесь:
https://codepen.io/wfortin/pen/yVJybg

Как при помощи flexbox сделать страницу?

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

Минуточку внимания

Войдите на сайт