Заказ Flexbox + счетчики CSS - PullRequest
Новая
       4

Заказ Flexbox + счетчики CSS

0 голосов
/ 25 июня 2018

Можно ли использовать счетчик CSS в сочетании со стилем заказа flexbox? Я хочу добиться эффекта, когда счетчик совпадает с порядком элементов.

Счетчики обновляются, когда некоторые элементы имеют свойство «display: none», поэтому я подумал, что, возможно, это работает и с порядком flexbox. 

   ol {
      list-style: none;
      display: flex;
      counter-reset: section;
    }
    
    li {
      width: 50px;
      height: 50px;
    }
    
    li::before {
      counter-increment: section;
      content: counter(section);
    }
 
 <ol>
      <li style="background-color: wheat; order: 2"></li> <!-- should display 2 -->
      <li style="background-color: olive; order: 3"></li> <!-- should display 3 -->
      <li style="background-color: purple; order: 1"></li> <!-- should sisplay 1 -->
 </ol>

https://jsfiddle.net/esx9j0hm/9/

1 Ответ

0 голосов
/ 25 июня 2018

После прочтения этой статьи MDN я решил, что вы не можете отобразить значения свойств css в content, но есть несколько способов сделать это.

1. Используйте атрибуты данных

Добавить атрибуты данных к li элементам и показать их в содержании: 

ol {
  list-style: none;
  display: flex;
}

li {
  width: 50px;
  height: 50px;
}

li::before {
  content: attr(data-order);
}
<ol>
  <li style="background-color: wheat; order: 2" data-order="2"></li> <!-- should display 2 -->
  <li style="background-color: olive; order: 3" data-order="3"></li> <!-- should display 3 -->
  <li style="background-color: lightblue; order: 1" data-order="1"></li> <!-- should sisplay 1 -->
</ol>

2. Используйте JS

Используйте js, чтобы получить стиль элемента li и соответственно установить его содержимое: 

let elements = document.querySelectorAll('ol li');
Array.prototype.forEach.call(elements, function(el, i) {
  let order = getComputedStyle(el)['order'];
  el.textContent = order;
});
ol {
  list-style: none;
  display: flex;
}

li {
  width: 50px;
  height: 50px;
}
<ol>
  <li style="background-color: wheat; order: 2"></li> <!-- should display 2 -->
  <li style="background-color: olive; order: 3"></li> <!-- should display 3 -->
  <li style="background-color: lightblue; order: 1"></li> <!-- should sisplay 1 -->
</ol>
...