Количество заказа с помощью CSS

Вот ваша миссия, если вы решите принять его: создать таблицу items.Каждый элемент должен охватывать одну треть области содержимого, с четвертым пунктом, начиная с новой строки, так же, как поплавки.Однако конкретный пункт всегда должен отображать цену в конце первого ряда .

Так что, если есть только два элемента, цена элемент будет вторым.Но если есть более трех элементов, цена будет последний элемент в первой строке .

Вы могли бы предположить, что JavaScript будет лучшим решением — просто цикл по элементам, и, если есть больше, чем три, обновить стиль.Но что, если я сказал вы могли бы сделать это с помощью CSS только

Чистый CSS Counting

Я пошел олл-ин на flexbox в последнее время, обучая его прямо рядом плавает как метод макета на нашей маленькой проекта под названием HackerYou, и я обнаружил, что студенты с ним хорошо.Технические flexbox содержит свойства, которые позволяют нам изменить разметку в новых отношениях.Одним из них является order, что позволяет изменять порядок презентационную содержания, не касаясь разметку или структуру .

Используется с запросами средств массовой информации, order является чрезвычайно полезным, что позволяет нам изменить порядок содержания с размером окна просмотра.Это заставило меня задуматься: почему мы не можем изменить порядок элементов в зависимости от объема контента

Количество Queries

Идея исследовал Леа Verou ^{1 | __24 Андре Luis ² и Хейдон Pickering ^{3 | __24, количество запросовподсчитать количество родственных элементов и применять стили, если определенное количество присутствуют .}}

Что делать, если мы объединили количественные запросы и order? Собственностью изменить, как содержание чтения в соответствии с тем, сколько от него есть

Использование Flexbox

Flexbox или “ Гибкая коробка Макет Module ⁴,” это спецификация CSS, что позволяет содержания, которое выложил в любом направлении, и для детей, чтобы быть рассчитан на своего родителя легко.Первоначально введенный в 2009 году, flexbox пережила много изменений на протяжении многих лет.Тем не менее, это supported ⁵ во всех современных браузеров, за исключением Internet Explorer 9 .

Один из самых значительных изменений в flexbox это синтаксис именования, связанных свойств и значений.Потому что спецификация превратилась в течение многих лет,производители браузеров будут использовать синтаксис, что в настоящее время разрабатывается в то время.Таким образом, используя префиксы рекомендуется обеспечить поддержку всей устаревших браузеров .

Один из рекомендуемых инструмент для управления кросс-браузерная поддержка CSS в это Autoprefixer ⁶, которые, как правило, включены в препроцессоров и залпом и рубаки файлов .

Понимание Order

Прежде чем мы углубимся в количественных запросов и как они работают, мы должны понять, как использовать order недвижимость.Во-первых, мы должны обернуть содержание с родительского элемента и применить display: flex к нему .

Вот HTML:

<div class="container">
  <p class="itemOne">Hello</p>
  <p class="itemTwo">World!</p>
</div>

А вот CSS:

.container {
  display: flex;
}

Смотрите ручка LVVXxz __20 | 7 Дрю Миннс ( @ drewminns ³⁰ ²¹ ¹⁷¹⁴ ¹¹ ⁸) на CodePen __52 | 31 ²² ¹⁸ ¹⁵ ¹² ⁹ .

По умолчанию, элементы появятся в порядке их в разметке.Все дочерние элементы flexbox родителей поделись order стоимость 1 .

Это значение безразмерный и просто относится к порядку элемента по отношению к другим элементам вокруг него.Тем не менее, мы можем изменить значение отдельного элемента с помощью order недвижимость .

p.itemOne {
  order: 2;
}

Смотрите Работа действительно хорошо Статья ¹⁰ Дрю Миннс ( @ drewminns ³⁰ ²¹ ¹⁷ ¹⁴ ¹¹ ⁸) на CodePen __17 | 31 ²² ¹⁸ ¹⁵ ¹² ⁹ .

В приведенном выше примере, мы изменили порядок p.itemOne до значения 2, что делает его падать после p.itemTwo и тем самым изменяя презентационную заказ для пользователя.Обратите внимание, что разметка остается такой же, однако .

Подсчет С CSS

Запросы СМИ, а?Такой удивительный инструмент для нанесения CSS, когда определенные условия.Эти условия могут быть тип устройства, размер, цвет и более — довольно мощные вещи.Но запрос относится только на устройство, что зритель using;нет определено методом CSS для запроса amount содержания в элементе .

Если мы получить творческую с существующими CSS псевдо-селекторов, однако, мы можем построить инструменты, которые подсчитать количество детей в элементе, а затем применить стили соответственно.Для этого примера, давайте используем простую упорядоченный список:

<ul class="ellist">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li class="target">6</li>
</ul>

Магия считая родственных элементов в внизу селектора.Этот пример относится к элементам стили, когда четыре или более доступны .

ul.ellist li:nth-last-child(n+4) ~ li,
ul.ellist li:nth-last-child(n+4):first-child {
  // styles go here
}

Смотрите ручка WvvYyN __59 | 13 Дрю Миннс ( @ drewminns ³⁰ ²¹ ¹⁷¹⁴ ¹¹ ⁸) на CodePen __17 | 31 ²² ¹⁸ ¹⁵ ¹² ⁹ .

Подождите, № Вот Безумный

Да, это селектор.В английском языке, может быть переведено, как это: “. Когда есть четыре или более дочерних элементов, получить другие предметы списка и первого ребенка«

Давайте разорвать этот вниз.Во-первых, подсчет:

ul.ellist li:nth-last-child(n+4) {
  // Styles!
}

Это переводится как: “Иди к последнему ребенку и отсчитать назад четверо детей.” Применить стили к четвертому элементу и все элементы, прежде чем он .

Идите вперед и эксперимент редактирования Codepen и переключения селектора на другой номер .

Смотрите Pqqvqp ¹⁶ Дрю Миннс ( @ drewminns ³⁰ ²¹ ¹⁷¹⁴ ¹¹ ⁸) на CodePen __53 | 31 ²² ¹⁸ ¹⁵ ¹² ⁹ .

Итак, вот она, считая.Если меньше, чем четыре братья подсчитывают, ничто не выбирается и стили не применяются.Теперь мы можем изменить этот селектор, чтобы выбрать все li элементы, использующие общем брат combinator ¹⁹ .

ul.ellist li:nth-last-child(n+4) ~ li {
  // Styles!
}

Проблема в том, что это не выбрать первый дочерний элемент.Мы можем добавить еще один селектор, чтобы сделать это:

ul.ellist li:nth-last-child(n+4) ~ li,
ul.ellist li:nth-last-child(n+4):first-child {
  // Styles!
}

Конечно, мы можем сделать селектор более агностик просто указать родительский элемент и давая ему выбрать всех детей.Мы делаем это с * селектора .

element > *:nth-last-child(n+4) ~ *,
element *:nth-last-child(n+4):first-child {
  // Styles!
}

Заказ на основе Quantity

Теперь, когда мы изучили, как считать с CSS селекторов и как использовать flexbox заказать контент, давайте смешать их вместе, чтобы построить инструмент, который упорядочивает элементы на основе количества братьев и сестер .

Опять же, мы пытаемся сделать наш последний элемент будетТретий элемент (т.е. быть последним элементом в первом ряду), когда есть более чем в три братья .

Давайте применим некоторые CSS для некоторых презентационный стиль.Мы будем применять display: flex родительского контейнера, что позволяет применять order недвижимость на дочерние элементы.Кроме того, мы будем применять некоторые умолчанию стиль в .target элемент, чтобы отличать его .

ul.ellist {
  margin: 20px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
}
ul.ellist > * {
  border: 10px solid #27ae60;
  text-align: center;
  flex: 1 0 calc(33.33% - 20px);
  padding: 20px;
  margin: 10px;
}
.target {
  color: white;
  background: #2980b9;
  border: 10px solid #3498db;
}
ul.ellist, ul.ellist > * {
  box-sizing: border-box;
}
ul.ellist {
  margin: 20px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
}
ul.ellist > * {
  border: 10px solid #27ae60;
  text-align: center;
  flex: 1 0 calc(33.33% - 20px);
  padding: 20px;
  margin: 10px;
}
ul.ellist .target {
  color: white;
  background: #2980b9;
  border: 10px solid #3498db;
}

Теперь у нас есть ба� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 14.07.2015 by coding.smashingmagazine.com