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

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, помог вам, или как?

Написано более года назад

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

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

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

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

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

CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- 3 часа назад
- 49 просмотров
3

ответа
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 2 подписчика
- 7 часов назад
- 91 просмотр
1

ответ
CSS

Средний
Почему у элемента такое поведение?
- 3 подписчика
- 17 часов назад
- 1265 просмотров
0

ответов
CSS

Простой
Почему не работает transition свойство в scss файле через webpack?
- 1 подписчик
- 20 часов назад
- 56 просмотров
2

ответа
HTML

+1 ещё

Простой
Почему верхние и нижние внешние отступы пустого блока не схлопываются?
- 2 подписчика
- 23 часа назад
- 193 просмотра
4

ответа
CSS

Простой
Почему нет задержки между повторами анимации?
- 1 подписчик
- вчера
- 57 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему пустой div смещается, если ему задать margin-bottom?
- 2 подписчика
- вчера
- 176 просмотров
1

ответ
CSS

Простой
Почему не сужается flex-элемент с flex-shrink: 1?
- 1 подписчик
- вчера
- 77 просмотров
0

ответов
CSS

+1 ещё

Средний
При сборке webpack картинки из css не открываются?
- 1 подписчик
- вчера
- 86 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать появление баннера от определенной высоты?
- 3 подписчика
- вчера
- 577 просмотров
1

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

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Разместить объявления на Авито

23 апр. 2024, в 17:47

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

Осуществлять оптовые продажи товаров для дома

23 апр. 2024, в 17:43

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

Разработать видеочатбота с ответами на вопросы абитуриентов

23 апр. 2024, в 17:07

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

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 комментария

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

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

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

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