justify-content: space-around; - как при нечетном количестве блоков выставить последний элемент под левый блок над ним?

Рейтинг: 0Ответов: 2Опубликовано: 17.05.2023

"Детский вопрос", но не помню ответа.Есть "main" с "flex-flow: wrap;" "justify-content: space-around" с нечетным кол-вом блоков внутри по 2 на строчку. Как можно поставить последний блок под левый блок на строчку выше. ("justify-content: space-around" делает последний нечетный блок посередине строчки). "margin-left: auto;" для последнего элемента будет толкать нечетный к стенке "main", а не под верхний левый блок. UPD: размеры блоков хаотичны

<style>
   main{
     display: flex;
     flex-flow: wrap;
     justify-content: space-around;
     width: 300px;
   }
   div{
     width: 125px;
   }
</style>

<main>
        <div></div>
        <div></div>
        <div></div>
</main>
css html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Извините, наверное не в тему, так как нужно было на flex решить, но на grid легче)).
Если нужно, что бы блоки зелёные занимали большую площадь, нужно просто вместо 2fr сделать 3fr например.

На flex сделал вариант, но это уже не space-around, а space-evenly получается.

main{
 display: grid;
 gap: 15px;
 grid-template-columns: 1fr 2fr 1fr 2fr 1fr;
}
div{
 width: 100%;
 height: 50px;
 background: green;
}
div:nth-child(odd) {
  grid-column-start: 2;
  grid-column-end: 3;
}
div:nth-child(even) {
  grid-column-start: 4;
  grid-column-end: 5;
}


section {
  display: flex;
  flex-wrap: wrap;
  row-gap: 15px;
  margin-top: 50px;
}
section div {
  width: 30%;
  background: red;
  margin: 0 calc((100% - (30% * 2)) / 4);
}
<main>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</main>

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

▲ 0

Если у Вас фиксированная ширина родителя и блоков (как в примере), то Вы можете задать конкретный margin с другой стороны от auto:

* {
     box-sizing: border-box;
}
main {
     display: flex;
     flex-flow: wrap;
     justify-content: space-around;
     width: 300px;
     border: 1px solid red;
}
div {
     width: 125px;
     border: 1px solid green;
     padding: 30px;
}
div:last-child {
     margin: 0 auto 0 12px;
}
<main>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</main>

Или можете добавить в конец чётный блок и скрыть его с помощью opacity:

* {
     box-sizing: border-box;
}
main {
     display: flex;
     flex-flow: wrap;
     justify-content: space-around;
     width: 300px;
     border: 1px solid red;
}
div {
     width: 125px;
     border: 1px solid green;
     padding: 30px;
}
div:last-child {
     opacity: 0;
}
<main>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</main>