Вопрос позиционирования flex

141

23 февраля 2022, 23:40

Подскажите пожалуйста, как сделать чтобы списки встали друг под другом? Т.е. список 5 встал по высоте под списком 2 и не равнялся на высоту список 1.

.flex-wrap{ 
  display: flex; 
  flex-wrap: wrap; 
  max-width: 1170px; 
  margin: 0 auto; 
} 
.flex-wrap ul{ 
  flex: 0 0 33.33333%; 
  max-width: 33.33333%; 
  padding: 0; 
  margin: 0 0 5px; 
 
} 
.flex-wrap ul li{ 
  list-style: none; 
}

<div class="flex-wrap"> 
<ul> 
  <li>Cписок 1</li> 
  <li><a href="#">Ссылка 1</a></li> 
  <li><a href="#">Ссылка 2</a></li> 
  <li><a href="#">Ссылка 3</a></li> 
  <li><a href="#">Ссылка 4</a></li> 
  <li><a href="#">Ссылка 5</a></li> 
  <li><a href="#">Ссылка 6</a></li> 
  <li><a href="#">Ссылка 7</a></li> 
  <li><a href="#">Ссылка 8</a></li> 
  <li><a href="#">Ссылка 9</a></li> 
  <li><a href="#">Ссылка 10</a></li> 
</ul> 
<ul> 
  <li>Cписок 2</li> 
  <li><a href="#">Ссылка 1</a></li> 
  <li><a href="#">Ссылка 2</a></li> 
  <li><a href="#">Ссылка 3</a></li> 
  <li><a href="#">Ссылка 4</a></li> 
  <li><a href="#">Ссылка 5</a></li> 
  <li><a href="#">Ссылка 6</a></li> 
</ul> 
<ul> 
  <li>Cписок 3</li> 
  <li><a href="#">Ссылка 1</a></li> 
  <li><a href="#">Ссылка 2</a></li> 
  <li><a href="#">Ссылка 3</a></li> 
</ul> 
<ul> 
  <li>Cписок 4</li> 
  <li><a href="#">Ссылка 1</a></li> 
  <li><a href="#">Ссылка 2</a></li> 
  <li><a href="#">Ссылка 3</a></li> 
  <li><a href="#">Ссылка 4</a></li> 
  <li><a href="#">Ссылка 5</a></li> 
</ul> 
<ul> 
  <li class="title">Cписок 5</li> 
  <li><a href="#">Ссылка 1</a></li> 
  <li><a href="#">Ссылка 2</a></li> 
  <li><a href="#">Ссылка 3</a></li> 
  <li><a href="#">Ссылка 4</a></li> 
  <li><a href="#">Ссылка 5</a></li> 
</ul> 
<ul> 
  <li>Cписок 6</li> 
  <li><a href="#">Ссылка 1</a></li> 
  <li><a href="#">Ссылка 2</a></li> 
  <li><a href="#">Ссылка 3</a></li> 
  <li><a href="#">Ссылка 4</a></li> 
  <li><a href="#">Ссылка 5</a></li> 
</ul> 
</div>

Answer 1

Используй колонки. Только порядок элементов надо будет поменять.

section { 
  -moz-column-count: 3; 
  column-count: 3; 
  -moz-column-gap: 1em; 
  column-gap: 1em; 
} 
 
ul { 
  padding: 0; 
  margin: 0 0 5px; 
  page-break-inside: avoid; 
  break-inside: avoid; 
} 
 
li { 
  list-style: none; 
}

<section> 
  <ul> 
    <li>Cписок 1</li> 
    <li><a href="#">Ссылка 1</a></li> 
    <li><a href="#">Ссылка 2</a></li> 
    <li><a href="#">Ссылка 3</a></li> 
    <li><a href="#">Ссылка 4</a></li> 
    <li><a href="#">Ссылка 5</a></li> 
    <li><a href="#">Ссылка 6</a></li> 
    <li><a href="#">Ссылка 7</a></li> 
    <li><a href="#">Ссылка 8</a></li> 
    <li><a href="#">Ссылка 9</a></li> 
    <li><a href="#">Ссылка 10</a></li> 
  </ul> 
  <ul> 
    <li>Cписок 2</li> 
    <li><a href="#">Ссылка 1</a></li> 
    <li><a href="#">Ссылка 2</a></li> 
    <li><a href="#">Ссылка 3</a></li> 
    <li><a href="#">Ссылка 4</a></li> 
    <li><a href="#">Ссылка 5</a></li> 
    <li><a href="#">Ссылка 6</a></li> 
  </ul> 
  <ul> 
    <li>Cписок 3</li> 
    <li><a href="#">Ссылка 1</a></li> 
    <li><a href="#">Ссылка 2</a></li> 
    <li><a href="#">Ссылка 3</a></li> 
  </ul> 
  <ul> 
    <li>Cписок 4</li> 
    <li><a href="#">Ссылка 1</a></li> 
    <li><a href="#">Ссылка 2</a></li> 
    <li><a href="#">Ссылка 3</a></li> 
    <li><a href="#">Ссылка 4</a></li> 
    <li><a href="#">Ссылка 5</a></li> 
  </ul> 
  <ul> 
    <li class="title">Cписок 5</li> 
    <li><a href="#">Ссылка 1</a></li> 
    <li><a href="#">Ссылка 2</a></li> 
    <li><a href="#">Ссылка 3</a></li> 
    <li><a href="#">Ссылка 4</a></li> 
    <li><a href="#">Ссылка 5</a></li> 
  </ul> 
  <ul> 
    <li>Cписок 6</li> 
    <li><a href="#">Ссылка 1</a></li> 
    <li><a href="#">Ссылка 2</a></li> 
    <li><a href="#">Ссылка 3</a></li> 
    <li><a href="#">Ссылка 4</a></li> 
    <li><a href="#">Ссылка 5</a></li> 
  </ul> 
<section>

Answer 2

.flex-wrap{ 
  display: flex; 
  max-width: 1170px; 
  justify-content: space-between; 
} 
.flex-wrap ul{ 
  padding: 0; 
  margin: 0 0 5px; 
 
} 
.flex-wrap ul li{ 
  list-style: none; 
}

<div class="flex-wrap"> 
    <div class="listGoup"> 
        <ul> 
            <li>Cписок 1</li> 
            <li><a href="#">Ссылка 1</a></li> 
            <li><a href="#">Ссылка 2</a></li> 
            <li><a href="#">Ссылка 3</a></li> 
            <li><a href="#">Ссылка 4</a></li> 
            <li><a href="#">Ссылка 5</a></li> 
            <li><a href="#">Ссылка 6</a></li> 
            <li><a href="#">Ссылка 7</a></li> 
            <li><a href="#">Ссылка 8</a></li> 
            <li><a href="#">Ссылка 9</a></li> 
            <li><a href="#">Ссылка 10</a></li> 
        </ul> 
        <ul> 
            <li>Cписок 4</li> 
            <li><a href="#">Ссылка 1</a></li> 
            <li><a href="#">Ссылка 2</a></li> 
            <li><a href="#">Ссылка 3</a></li> 
            <li><a href="#">Ссылка 4</a></li> 
            <li><a href="#">Ссылка 5</a></li> 
        </ul> 
    </div> 
    <div class="listGoup"> 
        <ul> 
            <li>Cписок 2</li> 
            <li><a href="#">Ссылка 1</a></li> 
            <li><a href="#">Ссылка 2</a></li> 
            <li><a href="#">Ссылка 3</a></li> 
            <li><a href="#">Ссылка 4</a></li> 
            <li><a href="#">Ссылка 5</a></li> 
            <li><a href="#">Ссылка 6</a></li> 
        </ul> 
        <ul> 
            <li class="title">Cписок 5</li> 
            <li><a href="#">Ссылка 1</a></li> 
            <li><a href="#">Ссылка 2</a></li> 
            <li><a href="#">Ссылка 3</a></li> 
            <li><a href="#">Ссылка 4</a></li> 
            <li><a href="#">Ссылка 5</a></li> 
        </ul> 
    </div> 
    <div class="listGoup"> 
        <ul> 
            <li>Cписок 3</li> 
            <li><a href="#">Ссылка 1</a></li> 
            <li><a href="#">Ссылка 2</a></li> 
            <li><a href="#">Ссылка 3</a></li> 
        </ul> 
        <ul> 
            <li>Cписок 6</li> 
            <li><a href="#">Ссылка 1</a></li> 
            <li><a href="#">Ссылка 2</a></li> 
            <li><a href="#">Ссылка 3</a></li> 
            <li><a href="#">Ссылка 4</a></li> 
            <li><a href="#">Ссылка 5</a></li> 
        </ul> 
    </div> 
</div>