WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

hit counter

Наши преимущества

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


WEB основы

Регистрация на сайте

Дополнительные материалы

CSS3 адаптивные блоки (Flex Box Model)

Обновлено: 07.06.2018 09:08

CSS3 адаптивные блоки (Flexible Box Model)

CSS3 Flexible Box — это новая спецификация разметки, позволяющая создавать макеты страниц и размещать блоки на странице таким образом, чтобы они вели себя предсказуемо в тех случаях, когда разметка страницы адаптирована под различные размеры экрана и устройства.

Элементы типа block используют вертикальный макет размещения. Элементы типа inline - горизонтальны. Flexbox позволяет и то и другое. Flexbox удобен, в частности, для устройств типа мобильных, где иногда нужно полностью менять макет страницы с горизонтального на вертикальный.

Вместо терминологии block и inline элементов flexbox исользует термины: главная и перпендикулярная оси (main axis и cross axis).

Контейнер (container)

Родительский элемент, в котором содержатся все остальные flexible - элементы. Flex - контейнер определяется с использованием значений flex или inline-flex свойства display.

Элемент (item)

Каждый дочерний элемент flex - контейнера становится flex - элементом.

Оси (axis)

Каждый flexbox макет использует две оси. Главная и перепендикулярная. Flex - элементы следуют один за другим вдоль главной оси (main-axis).

  • flex-direction - это свойство, которое задаёт главную ось
  • justify-content - задаёт размещение flex-элементов в текущей строке главной оси
  • align-items - задаёт размещение flex-элементов в текущей строке перпендикулярной оси
  • align-self - определяет, как единичный flex-элемент выравнивается вдоль перпендикулярной оси, переопределяя значения, заданные в align-items

Направления (directions)

Границы flex- контейнера ( main start/main end и cross start/cross end ) определяют задают начальные и конечные точки для перемещений flex-элементов внутри контейнера.

  • Свойство order присваивает элементы порядковым группам и определяет, какие элементы появляются первыми.
  • Свойство flex-flow сокращает описание свойств flex-direction и flex-wrap для размещения flex-элементов.

Строки (lines)

Элементы Flex могут быть размещены либо на одной строке, либо на нескольких строках в соответствии с свойством flex-wrap, которое управляет направлением поперечной оси и направлением, в котором формируются новые строки.

Размеры (dimensions)

Для flex-элементов свойства width и height задают размеры.

Свойство flex сокращает описание свойств flex-grow, flex-shrink, flex-basis для описаниия адаптивных размеров flex-элементов.

CSS3 Flexbox свойства

 

Свойство Описание Значения Пример
display Тип flex-контейнера flex
  inline-flex		 display:flex;
display: -webkit-flex;		  
flex-direction Определяет направление размещения flex-элементов внутри flex-контейнера flex-direction flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
justify-content Выравнивает горизонтально элементы flex в случае, если они не занимают всё пространство по главной оси. flex-start
  flex-end
  center
  space-between
  space-around
  initial
  inherit		 div {
-webkit-justify-content: space-around; 
justify-content: space-around;
}
align-items Свойство align-items указывает выравнивание по умолчанию для элементов внутри flex-контейнера.
Можно использовать свойство align-self для каждого элемента, чтобы переопределить свойство align-items.		 stretch
  center
  flex-start
  flex-end
  baseline
  initial
  inherit;		 div {
-webkit-align-items: center; 
align-items: center;
}
flex-wrap Указывает, должны ли flex-элементы переноситься на другую строку, если им недостаточно места в одной строке nowrap
  wrap
  wrap-reverse
  initial
  inherit		 div {
-webkit-flex-wrap: wrap; 
flex-wrap: wrap;
}
align-content Модифицирует поведение свойства flex-wrap. Похоже на align-items, но вместо выравнивания flex-элементов  выравнивает строки stretch
  center
  flex-start
  flex-end
  space-between
  space-around
i  nitial
  inherit		 div {
-webkit-align-content: center;
align-content: center;
}
flex-flow Сокращение для свойств flex-direction и flex-wrap flex-flow: flex-direction flex-wrap|initial|inherit; div {
-webkit-flex-flow: row-reverse wrap; 
flex-flow: row-reverse wrap;
}
order Задаёт порядок следования flexible элементов относительно остальных внутри одного контейнера number
  initial
  inherit		 -webkit-order: 2;
  order: 2;
align-self Используется для  flex-элементов. Переопределяет свойство контейнера align-items  auto
stretch
center
flex-start
flex-end
baseline
initial
inherit		 div {
-webkit-align-self: center; 
align-self: center;
}
flex Задаёт длину  flex-элемента по отношению к остальным внутри того же контейнера flex-grow flex-shrink flex-basis auto|initial|inherit div {
-webkit-flex: 1; 
-ms-flex: 1; 
flex: 1;
}
flex-grow Указывает, насколько элемент будет увеличиваться относительно остальных элементов внутри одного и того же контейнера    
flex-shrink Свойство определяет, как элемент будет уменьшаться относительно остальных гибких элементов внутри одного контейнера    
flex-basis Свойство задает начальную длину flex-элемента   div:nth-of-type(2) {
-webkit-flex-basis: 80px; 
flex-basis: 80px;
}
       

 

 

 

Похожие статьи