Как сверстать следующую секцию?

Question

ework @ework

Как сверстать следующую секцию?

Есть flexbox с flex элементами, использую на них justify-content: space-between, но при переносе последние блоки просто растягиваются по ширине блока.

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

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

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

Semantic.Moscow @SemanticMoscow

укажите для них max-width

Написано более двух лет назад
ework @ework Автор вопроса

Semantic.Moscow, Он указан, но элементы растягиваются по ширине

Написано более двух лет назад
Semantic.Moscow @SemanticMoscow

ework, откройте консоль разработчика и посмотрите что на самом деле происходит с этими блоками

так, стоп, но ведь space-between как раз и подразумевает, что блоки должны занять крайние положения

почитайте что-то вроде этого: https://habr.com/ru/post/467049/

Написано более двух лет назад
Denis Melnikov @Mi11er

ework, и где тут по ширине, тут space-between как раз... Пространство между. Если вам нужно в центре, так и укажите j-c: center

Написано более двух лет назад

Решения вопроса 1

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

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

Да, я это пробовал, но возникает другая проблема, отступы между блоками становятся разные, у верхних трех блоков расстояние между друг другом меньше, у нижних больше, получается единственный вариант это сделать через space-around и отдельно к двум блокам добавить отступы?

Написано более двух лет назад

Noder SS @noder_ss

ework,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div class="main">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
<style>
    .main{
        width:100% ;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;/* Совсем не обязательно, нужно, чтобы когда элементу не было места, он переносился */
    }
    .main div{
       
width:400px ;
height: 260px;
border-radius: 20px;
background-color: black;
margin: 0px 25px 50px 25px;
    }
</style>
</html>

Попробуйте сделать так, через center и указанные отступы у блоков

Написано более двух лет назад

Noder SS @noder_ss

ework, помог вам, или как?

Написано более двух лет назад

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

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

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

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

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 2 часа назад
- 25 просмотров
0

ответов
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 10 часов назад
- 71 просмотр
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 13 часов назад
- 82 просмотра
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 18 часов назад
- 79 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- вчера
- 70 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- вчера
- 54 просмотра
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- вчера
- 59 просмотров
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- вчера
- 92 просмотра
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 71 просмотр
2

ответа
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 21 нояб.
- 35 просмотров
0

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Требуется консультация по UX-дизайну казино

24 нояб. 2024, в 01:35

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

Расширение для браузера

24 нояб. 2024, в 01:24

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

Создать сервер VPS через wireguard

24 нояб. 2024, в 00:04

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

Semantic.Moscow, Он указан, но элементы растягиваются по ширине
ework, откройте консоль разработчика и посмотрите что на самом деле происходит с этими блоками

так, стоп, но ведь space-between как раз и подразумевает, что блоки должны занять крайние положения

почитайте что-то вроде этого: https://habr.com/ru/post/467049/
ework, и где тут по ширине, тут space-between как раз... Пространство между. Если вам нужно в центре, так и укажите j-c: center

Answer 1 · 2022-07-30 15:41:58

Noder SS @noder_ss

Линуксоид-энтузиаст и SQL разработчик

Все проще, чем кажется, просто замените space-between на space-around, у бэтвина с края сайта отступа нет

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

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

Как сверстать следующую секцию?

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

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

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