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

Question

ework @ework

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

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

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

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

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

Помогут разобраться в теме Все курсы

Нетология

Фронтенд-разработчик

11 месяцев

Далее
Академия Эдюсон

Веб-разработчик Базовый

9 месяцев

Далее
Skillbox

Веб-вёрстка

3 месяца

Далее

Решения вопроса 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

Простой
Как в CSS указать цвет родителю только если дочек 5?
- 1 подписчик
- 21 час назад
- 137 просмотров
1

ответ
HTML

+1 ещё

Простой
"microdata ОШИБКА: невозможно определить принадлежность данных полей" — в чем может быть причина?
- 1 подписчик
- 09 мар.
- 116 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как быть если ломается сайт, в зависимости от браузера?
- 1 подписчик
- 05 мар.
- 368 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему не получается собрать сайт на Hugo?
- 1 подписчик
- 02 мар.
- 224 просмотра
1

ответ
HTML

+1 ещё

Средний
Как заставить элемент определять свою высоту по содержимому?
- 2 подписчика
- 26 февр.
- 348 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как нарисовать нестандартную фигуру?
- 1 подписчик
- 13 февр.
- 333 просмотра
2

ответа
HTML

+1 ещё

Простой
Смарт ТВ LG с WebOS не проигрывает видео встроенные в HTML?
- 1 подписчик
- 05 февр.
- 193 просмотра
1

ответ
CSS

Средний
Как учитывать диагональ при вёрстке?
- 2 подписчика
- 26 янв.
- 330 просмотров
3

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

+1 ещё

Средний
Как делается Merge или Union в css?
- 1 подписчик
- 24 янв.
- 124 просмотра
0

ответов
CSS

Средний
Как задать цвет рамки типовой кнопки?
- 1 подписчик
- 24 янв.
- 166 просмотров
1

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

Junior AdTech Project Manager

FOXIBLE

от 60 000 до 90 000 ₽

Frontend-разработчик (Vanilla JS / jQuery, high-load)

Karma8

от 200 000 ₽

Fullstack php разработчик

Kaan

от 100 000 до 120 000 ₽

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

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

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

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

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