Увеличение или уменьшение ширины элементов списка, согласно условию

Question

У меня есть список элементов, как показано ниже

<ul> 
    <li>One<li> 
    <li>One-One<li> 
    <li>Two</li> 
    <li>Two-Two</li> 
</ul> 

Выходной сигнал может быть динамическим один раз, показывающий две колонки и один раз, показывающий один столбец как этот

Сценарий двух колонн

Первый | Один-Один

Два | Два-Два

Один столбец Сценарий

Один

Два

Пожалуйста, помогите мне, как я могу идти об увеличении ширины и уменьшения ширины согласно scenario.I я использую угловые JS с html5 и css3.

Спасибо за помощь заранее.

Answer 1

Решение с использованием display:flex и @media запросов. Проверьте пример ниже, изменив размер окна вывода.

ul { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 
li { 
 
    width: 50%; 
 
} 
 
@media (max-width: 40em) { 
 
    li { 
 
    width: 100%; 
 
    } 
 
    li:nth-child(even) { 
 
    display: none; 
 
    } 
 
}

<ul> 
 
    <li>One</li> 
 
    <li>One-One</li> 
 
    <li>Two</li> 
 
    <li>Two-Two</li> 
 
</ul>