Как сверстать с помощью flex-box?

337
30 сентября 2018, 14:00

Есть такая разметка, можно ли без дополнительных оберток сделать это на флексбокс? Что должно получится прикрепляю изображением.

<ul class="cakes__list"> 
        <li class="cakes__item cakes__item--classic"> 
          <a href="#"> 
            <span class="cakes__item-name">Классические</span> 
            <span class="cakes__item-count"> 
              <span>24</span> 
              Вида 
            </span> 
          </a> 
        </li> 
        <li class="cakes__item cakes__item--mousses"> 
          <a href="#"> 
            <span class="cakes__item-name">Муссовые</span> 
            <span class="cakes__item-count"> 
              <span>12</span> 
              Видов 
            </span> 
          </a> 
        </li> 
        <li class="cakes__item cakes__item--wedding"> 
          <a href="#"> 
            <span class="cakes__item-name">Свадебные</span> 
            <span class="cakes__item-count"> 
              <span>20</span> 
              Видов 
            </span> 
          </a> 
        </li> 
        <li class="cakes__item cakes__item--men"> 
          <a href="#"> 
            <span class="cakes__item-name">Мужчинам</span> 
            <span class="cakes__item-count"> 
              <span>12</span> 
              Видов 
            </span> 
          </a> 
        </li> 
        <li class="cakes__item cakes__item--women"> 
          <a href="#"> 
            <span class="cakes__item-name">Женщинам</span> 
            <span class="cakes__item-count"> 
              <span>16</span> 
              Видов 
            </span> 
          </a> 
        </li> 
        <li class="cakes__item cakes__item--children"> 
          <a href="#"> 
            <span class="cakes__item-name">Детские</span> 
            <span class="cakes__item-count"> 
              <span>18</span> 
              Видов 
            </span> 
          </a> 
        </li> 
      </ul>

Answer 1

Нет, на flexbox нельзя. А вот на float'ах - легко.

ul, li { 
  margin: 0; 
  padding: .5em; 
  list-style: none; 
} 
 
li { 
  width: 40%; 
  padding: .5em; 
  box-sizing: border-box; 
  height: 3em; 
  float: left; 
} 
 
a { 
  display: block; 
  height: 100%; 
  background: silver; 
} 
 
li:nth-child(3n+1) { 
  width: 60%; 
  height: 6em; 
} 
 
li:nth-child(6n+2), li:nth-child(6n+3), li:nth-child(6n+4) { 
  float: right; 
}
<ul> 
  <li><a>1</a></li> 
  <li><a>2</a></li> 
  <li><a>3</a></li> 
  <li><a>4</a></li> 
  <li><a>5</a></li> 
  <li><a>6</a></li> 
  <li><a>7</a></li> 
  <li><a>8</a></li> 
  <li><a>9</a></li> 
</ul>

READ ALSO
Как оптимизировать обновление Dictionary в цикле foreach?
c#

Как оптимизировать обновление Dictionary в цикле foreach?

Хочу оптимизировать - записать по другому эту часть кода:

 277
Можно ли использовать VideoCapture вместо Capture
c#

Можно ли использовать VideoCapture вместо Capture

Пишу программу на C# по распознаванию речи (MicrosoftSpeech

 271
Как указать профиль браузера Chrome в Silenium WebDriver C#
c#

Как указать профиль браузера Chrome в Silenium WebDriver C#

В браузере Chrome присутствуют разные профили пользователя, мне необходимо при создании экземпляра ChromeDriver запустить именно браузер под пользователя...

 226
Проброс события из библиотеки C# .NET
c#

Проброс события из библиотеки C# .NET

Пишу простое приложение для захвата видеопотока с IPкамеры на винформах используя фреймворк AForgeЧто бы код не был свалкой, вынес многие вещи...

 267