#html #css #flexbox
Вопрос:
Я пытаюсь создать макет для этого веб-сайта с помощью flexbox, но justify-content
свойство, похоже, не работает. В конечном счете, я хочу, чтобы это выглядело так:
У меня правильная сетка, но на данный момент я не могу получить пространство между элементами. Это то, что у меня есть прямо сейчас:
Как мне правильно выровнять свой контент? Вот мой кодовый код: https://codepen.io/caseycling/pen/poNXRXZ
.service-container {
display: flex;
justify-content: center;
}
.img {
margin: .5rem;
border: 1px solid grey;
min-width: 100px;
}
.container>div {
border: 1px solid grey;
min-height: 100px;
min-width: 100px;
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around; //Not working
}
.service {
flex: 40%;
margin: .5rem;
}
<div class='service-container'>
<div class='img'>IMG</div>
<div class='container'>
<div class='service'>Service</div>
<div class='service'>Service</div>
<div class='service'>Service</div>
<div class='service'>Service</div>
</div>
</div>
Комментарии:
1. Используйте
gap: 10px;
.
Ответ №1:
Я думаю, это потому, что вы прикрепляетесь space-around
не в том месте. Теперь у вас есть он, на container
котором находится только левый прямоугольник. Это свойство повлияет на все внутри, но не снаружи. Вы должны добавить эту опору в самую высокую оболочку, которая в данном случае service-container
.service-container {
display: flex;
justify-content: space-around; // working here
}
Ответ №2:
Применен ваш основной контейнер flex justify-content: center
.
Похоже, вы не хотите центрировать предметы по центру. Вы хотите, чтобы они были разделены, как на вашем изображении.
Так что используйте justify-content: space-between
.
Но если вы все еще хотите, чтобы макет был центрирован, установите ширину контейнера и используйте margin
свойство.
.service-container {
display: flex;
justify-content: space-between;
width: 800px;
margin: 0 auto;
}
.img {
margin: .5rem;
border: 1px solid grey;
min-width: 100px;
}
.container>div {
border: 1px solid grey;
min-height: 100px;
min-width: 100px;
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around; //Not working
}
.service {
flex: 40%;
margin: .5rem;
}
<div class='service-container'>
<div class='img'>IMG</div>
<div class='container'>
<div class='service'>Service</div>
<div class='service'>Service</div>
<div class='service'>Service</div>
<div class='service'>Service</div>
</div>
</div>
Ответ №3:
Добавить margin-right
к .img
.img {
margin: .5rem;
border: 1px solid grey;
min-width: 100px;
margin-right: 100px; // Increase space between image and servies
}