Блог

Главная - Вопросы по программированию - Как создать пространство между элементами в flexbox?

Как создать пространство между элементами в flexbox?

#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
}
Метки: