Flexbox презентация

Содержание

Слайд 1Flexbox
Данильченко Анна Александровна
Преподаватель кафедры программного обеспечения систем ЖГТУ

Слайд 2Flexbox
Главная задумка flex-вёрстки в наделении контейнера способностью изменять ширину/высоту (и порядок)

своих элементов для наилучшего заполнения пространства (в большинстве случаев — для поддержки всех видов дисплеев и размеров экранов). Flex-контейнер растягивает элементы для заполнения свободного места или сжимает их, чтобы предотвратить выход за границы.

Слайд 15display: flex | inline-flex;
Применяется к: родительскому элементу flex-контейнера.
Определяет flex-контейнер (инлайновый или блочный

в зависимости от выбранного значения), подключает flex-контекст для всех его непосредственных потомков.

Слайд 16Пример
HTML

Я ПЕРВЫЙ
Я ВТОРОЙ
Я ТРЕТИЙ

Я ЧЕТВЕРТЫЙ



.flex {
height:640px;
}
.flex div {
float:left;
background:#039;
border-radius:5px;
padding:5px;
margin-left:10px;
}
.flex div:first-child {
background:#090;
}
.flex div:last-child {
background:#C00;
}

Слайд 17Включим flexbox
.flex {
height:640px;
display:flex;
}

Слайд 22Меняем направление по оси
.flex {
height:640px;
display:flex;
background: #838283;
flex-direction:row-reverse;
}

Слайд 23Поворачиваем саму ось
.flex {
height:640px;
display:flex;
background: #838283;
flex-direction:column;
}

Слайд 24Меняем направление по оси
.flex {
height:640px;
display:flex;
background: #838283;
flex-direction:column-reverse;
}

Слайд 26Пример
.flex {
height:640px;
display:flex;
background: #838283;
}
.flex {

height:640px;
display:flex;
background: #838283;
justify-content:flex-end;
}

.flex {
height:640px;
display:flex;
background: #838283;
justify-content:center;
}

Слайд 28Пример
.flex {
height:640px;
display:flex;
background: #838283;
justify-content:center;
align-items:flex-end;
}
.flex {

height:640px;
display:flex;
background: #838283;
justify-content:center;
align-items:stretch;
}

.flex {
height:640px;
display:flex;
background: #838283;
justify-content:center;
align-items:center;
}

Слайд 29Перестановка
Применяется к: дочернему элементу
order:

Слайд 30.flex div:first-child {
background:#090;
order:2;
}
.flex div:last-child {
background:#C00;
order:1;

}
.flex div:nth-child(2) {
order:3;
}

Слайд 31flex-grow- Применяется к: дочернему элементу. Определяет для flex-элемента возможность «вырастать» при необходимости.
flex-grow:

(по умолчанию 0)

.flex div:first-child {
background:#090;
flex-grow:1;
}
.flex div:last-child {
background:#C00;
}
.flex div:nth-child(2) {
flex-grow:2;
}

Слайд 34flex-shrink- Применяется к: дочернему элементу. Определяет для flex-элемента возможность «сжиматься» при необходимости.
flex-basis-

Применяется к: дочернему элементу. Определяет размер по умолчанию для элемента перед распределением пространства в контейнере.

Слайд 35Align-self – выравнивание отдельного элемента(Применяется к: дочернему элементу)
.flex div:nth-child(2) {
flex-grow:1;
align-self:flex-start;

}

.flex {
height:640px;
display:flex;
background: #838283;
justify-content:center;
align-items:stretch;
}

align-self: auto | flex-start | flex-end | center | baseline | stretch

Слайд 37Вендорные префиксы

Слайд 38Резервные варианты для Flexbox

Слайд 39Кроссбраузерный flexbox

Слайд 43Читать
Поддержка Flexbox в браузерах
Таблица соответствия F09 и F11
Таблица соответствия F09 и

F11 для IE10
CSS3 Flexplorer
Использование Flexbox от Mozilla
Руководство по Flexbox от Microsoft

Слайд 44Задание

Слайд 45Задание

Слайд 46Вопросы

Похожие презентации

основы информационной безопасности. Формальные модели ИБ. (Тема 3.3) 449
Новые свойства и возможности Windows Vista 285
VR/AR технологии в играх 1335
Системный администратор 322
Майн крафт 411
AlarusApp 264

Обратная связь

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

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.

Для правообладателей

Яндекс.Метрика