• Страница 1 из 1
  • 1
Модератор форума: ABC  
Форум » Cascading Style Sheets (CSS) » Верстка страниц с помощью CSS » Flexbox-вёрстка » Свойства flex-элементов (Порядок отображения,ширина и способ выравнивания элементов)
Свойства flex-элементов
ABCДата: Вт, 09.04.2019, 13:18 | Сообщение # 1
Offline
Ранее мы узнали, что для flex-контейнера существуют свойства, которые присущи только для него.
Настал черёд свойств flex-элементов.

Свойства для flex-элементов позволяют управлять порядком их отображения,шириной и способом выравнивания их внутри родительского контейнера.

Свойство order

Данное свойство позволяет каждому flex-элементу назначить приоритет вывода в строке или в колонке путём присваивания ему числового индекса. (1,2,3,4 и т.д.) В зависимости от этого индекса(приоритета) определяется порядок вывода элементов в строке или колонке, независимо от того, в каком порядке данные элементы располагаются в HTML-коде.

За счёт этого, вы можете размещать в HTML-коде наиболее значимый контент первым,что положительно сказывается при индексации сайта поисковиками.
Например, ранее код трёхколочного макета сайта был таким(порядок в коде определял порядок вывода на странице):

Код
<div class = "main">

<div class='sidebar_left'></div>
<div class='content'></div>
</div class='sidebar_right'></div>

</div>


В итоге, прежде чем дойти до контента, поисковой системе в первую очередь нужно было просканировать код левого сайдбара. С помощью flex-технологии мы можем наш HTML-код записать так:

Код
<div class = "main">

<div class='content'></div>
<div class='sidebar_left'></div>
</div class='sidebar_right'></div>

</div>


теперь поисковику в первую очередь достанется сканировать область основного контента, что нам и нужно. А как быть с выводом на странице? Всё очень просто!
Для блока с классом 'main' мы прописываем display:flex; а для блоков внутри него задаём с помощью свойства order приоритет их вывода на странице(в контейнере):

Код
.main {
  display: flex;
}
.sidebar_left {
  order: 1;
}
.content {
  order: 2;
}
.sidebar_right {
  order: 3;
}


И теперь, хоть блок с классом 'main' и указан в HTML-коде первым, на странице он будет также отображён между левым и правым сайдбаром.
Посмотрите демо-пример.
В верхнем контейнере блоки располагаются в том порядке, в каком они прописаны в HTML-коде, в блоке ниже - те же элементы, но их порядок вывода изменён с помощью свойства order.

Пример 2

Блок с цифрой 3 нам нужно сместить в крайнее левое положение(поставить первым в строке). Это можно сделать, если с помощью свойства order назначить ему индекс приоритета -1, а для прочих блоков не назначать индексов
Смотрим демо.

В самом нижнем flex-контейнере наоборот, блок с цифрой один мы переместили в крайнее правое положение(последним в строке) с помощью свойства order и присвоенного ему значения 1. Другим блокам в контейнере индексы приоритета не присваивались.

Полный код демо-страницы:

Код
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flexbox</title>
<style>
body {
    background-color: #1d1f21;
    color: #666666;
    font-size: 16px;
    font-family: "PT Sans", "Arial", serif;
    font-weight: 400;
    font-style: normal;
}
.container {
  background-color: #ffffff;
  margin: 50px auto;
  display: flex;
  padding: 10px;
}
.container div {
    width: 200px;
    padding: 10px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    background-color: #ebebeb;
    margin-right: 10px;
}
p {
  font-size: 20px;
}
.left_position {
  order: -1;
}
.right_position {
  order: 1;
}
</style>
</head>
<body>
<div class="container">
     <div>1</div>
     <div>2</div>
     <div>3</div>
</div>
<div class="container">
     <div>1</div>
     <div>2</div>
     <div class='left_position'>3<p>order: -1;</p></div>
</div>
<div class="container">
     <div class='right_position'>1<p>order: 1;</p></div>
     <div>2</div>
     <div>3</div>
</div>
</body>
</html>


Важно: при использовании значения column для вывода элементов в контейнере, следует иметь в виду, что вверху будут flex-элементы с меньшими индексами приоритета,а элементы с большим индексом будут по-порядку, ниже. Не стоит забывать, что значения column-reverse и row-reverse изменяют порядок отображения элементов в колонках и строках на противоположный.
 
профиль цитата изменить удалить
ABCДата: Сб, 13.04.2019, 23:11 | Сообщение # 2
Offline
Свойство align-self

Данное свойство, применяемое для flex-элементов, работает аналогично свойству align-items для flex-контейнера, принимает те же значения и оказывает тот же эффект, но только на отдельные flex-элементы, в отличие от align-items, которое воздействует на все элементы flex-контейнера.

Свойство align-self, применённое к элементу, замещает любое установленное значение align-items.


Посмотрите демо. Несмотря на то, что для элементов flex-контейнера задано значение align-items: flex-start, второй элемент прижат к нижнему краю, так как конкретно для него задано значение align-self: flex-end, которое переопределяет свойство, заданное для контейнера.
 
профиль цитата изменить удалить
Форум » Cascading Style Sheets (CSS) » Верстка страниц с помощью CSS » Flexbox-вёрстка » Свойства flex-элементов (Порядок отображения,ширина и способ выравнивания элементов)
  • Страница 1 из 1
  • 1
Поиск: