Блог

Главная - Вопросы по программированию - В столбце гибких элементов поместите последние два элемента в одну строку

В столбце гибких элементов поместите последние два элемента в одну строку

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

position: absolute Можно ли сделать так, чтобы элементы 6 и 7 в этом списке отображались рядом в строке 6, не изменяя HTML или не прибегая к хакерству?

 ul {
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  list-style-type: none;
}
li {
  width: 33%;
  border: 1px solid #ccc;
  text-align: center;
} 
 <div class="flex-container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
</div>

https://jsfiddle.net/511qb3py/

Ответ №1:

Вот один из методов:

  • Переключите flex-direction на row .
  • Включить wrap .
  • Дайте каждому элементу flex достаточную ширину, чтобы в строке мог поместиться только один. Это заставляет следующие элементы создавать новые строки.
  • Задайте двум последним элементам (6 и 7) ширину, которая позволяет обоим помещаться на одной строке.
 ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style-type: none;
  border: 1px solid gray;
}
li {
  flex: 0 0 66%; /* flex-grow flex-shrink flex-basis */
  text-align: center;
  border: 1px solid #ccc;
}
li:nth-last-child(-n   2) {
  flex-basis: 45%;
} 
 <div class="flex-container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
</div>

Ответ №2:

Вы можете сделать это следующим образом:

 ul {
  border: 1px solid gray;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
}
li {
  min-width: 33%;
  max-width: 33%;
  border: 1px solid #ccc;
  text-align: center;
  margin-left: 100%;
  margin-right: 100%;
}
li:nth-last-child(-n   2) {
  margin: 0;
} 
 <div class="flex-container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
</div>
Метки: