Flexbox в CSS3

CSS Flex Container

Like we specified in the previous chapter, this is a flex container (the blue area) with three flex items:

The flex container becomes flexible by setting the display property to flex :

Example

The flex container properties are:

The flex-direction Property

The flex-direction property defines in which direction the container wants to stack the flex items.

Example

The column value stacks the flex items vertically (from top to bottom):

Example

The column-reverse value stacks the flex items vertically (but from bottom to top):

Example

The row value stacks the flex items horizontally (from left to right):

Example

The row-reverse value stacks the flex items horizontally (but from right to left):

The flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not.

The examples below have 12 flex items, to better demonstrate the flex-wrap property.

Example

The wrap value specifies that the flex items will wrap if necessary:

Example

The nowrap value specifies that the flex items will not wrap (this is default):

Example

The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order:

The flex-flow Property

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

Example

The justify-content Property

The justify-content property is used to align the flex items:

Example

The center value aligns the flex items at the center of the container:

Example

The flex-start value aligns the flex items at the beginning of the container (this is default):

Example

The flex-end value aligns the flex items at the end of the container:

Example

The space-around value displays the flex items with space before, between, and after the lines:

Example

The space-between value displays the flex items with space between the lines:

The align-items Property

The align-items property is used to align the flex items.

In these examples we use a 200 pixels high container, to better demonstrate the align-items property.

Example

The center value aligns the flex items in the middle of the container:

Example

The flex-start value aligns the flex items at the top of the container:

Example

The flex-end value aligns the flex items at the bottom of the container:

Example

The stretch value stretches the flex items to fill the container (this is default):

Example

The baseline value aligns the flex items such as their baselines aligns:

Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:

2

3

The align-content Property

The align-content property is used to align the flex lines.

In these examples we use a 600 pixels high container, with the flex-wrap property set to wrap , to better demonstrate the align-content property.

Example

The space-between value displays the flex lines with equal space between them:

Example

The space-around value displays the flex lines with space before, between, and after them:

Example

The stretch value stretches the flex lines to take up the remaining space (this is default):

Example

The center value displays the flex lines in the middle of the container:

Example

The flex-start value displays the flex lines at the start of the container:

Example

The flex-end value displays the flex lines at the end of the container:

Perfect Centering

In the following example we will solve a very common style problem: perfect centering.

SOLUTION: Set both the justify-content and align-items properties to center , and the flex item will be perfectly centered:

Example

The CSS Flexbox Container Properties

The following table lists all the CSS Flexbox Container properties:

Property	Description
align-content	Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
align-items	Vertically aligns the flex items when the items do not use all available space on the cross-axis
display	Specifies the type of box used for an HTML element
flex-direction	Specifies the direction of the flexible items inside a flex container
flex-flow	A shorthand property for flex-direction and flex-wrap
flex-wrap	Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
justify-content	Horizontally aligns the flex items when the items do not use all available space on the main-axis

Источник

Flexbox

Flexbox — это общее название для модуля Flexible Box Layout , который имеется в CSS3. Данный модуль определяет особый режим компоновки/верстки пользовательского интерфейса, который называется flex layout . В этом плане Flexbox предоставляет иной подход к созданию пользовательского интерфейса, который отличается от табличной или блочной верстки. Развернутое описание стандарта по модулю можно посмотреть в спецификации.

Благодаря Flexbox проще создавать сложные, комплексные интерфейсы, где мы с легкостью можем переопределять направление и выравнивание элементов, создавать адаптивные табличные представления. Кроме того, Flexbox довольно прост в использовании. Единственная проблема, которая может возникнуть при его применении, — это кроссбраузерность. Например, в Internet Explorer поддержка Flexbox и то частичная появилась только в последней версии — IE11. В то же время все современные браузеры, в том числе Microsoft Edge, Opera, Google Chrome, Safari, Firefox, имеют полную поддержку данного модуля.

Основными составляющими компоновки flexbox являются flex-контейнер (flex container) и flex-элементы (flex items). Flex container представляет некоторый элемент, внутри которого размещены flex-элементы.

Основные понятия

Прежде чем переходить к изучению верстки flexbox, стоит рассмотреть некоторые основные понятия.

Одно из ключевых понятий представляет main axis или центральная ось. Это условная ось во flex-контейнере, вдоль которой позиционируются flex-элементы.

Элементы в контейнере могут располагаться по горизонтали в виде строки и по вертикали в виде столбца. В зависимости от типа расположения будет меняться и центральная ось. Если расположение в виде строки, то центральная ось направлена горизонтально слева направо. Если расположение в виде столбца, то центральная ось направлена вертикально сверху вниз.

Термины main start и main end описывают соответственно начало и конец центральной оси, а расстояние между между ними обозначается как main size .

Кроме основной оси существует также поперечная ось или cross axis . Она перпендикулярна основной. При расположении элементов в виде строки cross axis направлена сверху вниз, а при расположении в виде столбца она направлена слева направо. Начало поперечной оси обозначается как cross start , а ее конец — как cross end . Расстояние между ними описывается термином cross size .

То есть, если элементы располагаются в строку, то main size будет представлять ширину контейнера или элементов, а cross size — их высоту. Если же элементы располагаются в столбик, то, наоборот, main size представляет высоту контейнера и элементов, а cross size — их ширину.

Создание flex-контейнера

Для создания flex-контейнера необходимо присвоить его стилевому свойству display одно из двух значений: flex или inline-flex .

Создадим простейшую веб-страницу, которая применяет flexbox:

     .flex-container < display: flex; >.flex-item < text-align:center; font-size: 1.1em; padding: 1.5em; color: white; >.color1 .color2 .color3  
Flex Item 1
 
Flex Item 2
 
Flex Item 3
 
   

Для контейнера flex-container установлено свойство display:flex . В нем располагается три flex-элемента.

Если значение flex определяет контейнер как блочный элемент, то значение inline-flex определяет элемент как строчный (inline). Рассмотрим оба способа на примере:

     .flex-container < display: flex; border:2px solid #ccc; >.inline-flex-container < display: inline-flex; border:2px solid #ccc; margin-top:10px; >.flex-item < text-align:center; font-size: 1.1em; padding: 1.5em; color: white; >.color1 .color2 .color3  
Flex Item 1
 
Flex Item 2
 
Flex Item 3
 
 
Flex Item 1
 
Flex Item 2
 
Flex Item 3
 
   

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

Источник

Оформление текста используя CSS

При изучении css важной частью является умение стилизовать текст. В данной статье рассмотрим свойства для задания стилей для текста, а также рассмотрим их использование на примерах.

Для многих свойств можно применить “глобальные” значения:

initial — устанавливает значение по умолчанию

inherit — наследует значение родительского элемента

Их описание находится здесь, чтобы не дублировать его много раз.

Стилизация текста

text-shadow — задает тень тексту, можно задать несколько теней через запятую

Синтаксис: text-shadow: смещение по x | смещение по y | радиус-размытия | цвет;

Синтаксис: text-decoration: text-decoration-line text-decoration-color text-decoration-style

• none — отсутствие линии
• overline — добавляет линию над текстом
• underline — добавляет линию под текстом
• line-through — перечеркивает текст
• initial
• inherit

• solid — сплошная линия
• double — двойная линия
• dotted — линия из точек
• dashed — пунктирная линия
• wavy — волнистая линия

Шрифты

font-family — задает название шрифта для текста. Можно указать несколько шрифтов через запятую. Если в названии шрифта есть пробелы, его нужно обернуть кавычками. Обычно указывается несколько шрифтов и семейство шрифтов. Самым первым указывают приоритетный шрифт, если браузер не находит такого шрифта у пользователя он применяет следующий. Семейство шрифтов указывается для ситуации когда ни одного из указанных шрифтов нет, тогда браузер сам выберет подходящий шрифт из указанного семейства шрифтов.

Список семейств шрифтов:

• serif — шрифты с засечками
• sans-serif — рубленные шрифты
• cursive — курсивные шрифты
• fantasy — декоративные шрифты
• monospace — моноширинные шрифты

• normal — обычный стиль (значение по умолчанию)
• italic — курсив
• oblique — наклонный
• initial
• inherit

font-weight — задает вес/жирность шрифта. Значения можно указать ключевыми словами или числовыми значениями: 100, 200, 300, 400, 500, 600, 700, 800, 900

• normal — обычный (аналогично 400)
• bold — жирный (аналогично 700)
• lighter — на один порядок более легче
• bolder — на один порядок более тяжелее
• initial
• inherit

Трансформация текста

• capitalize — первая буква каждого слова заглавная
• uppercase — все буквы заглавные
• lowercase — все буквы строчные
• none — отсутствие трансформаций (значение по умолчанию)
• initial
• inherit

Выравнивание текста

text-align — задает горизонтальное выравнивание текста

• left — выравнивание по левому краю
• right — выравнивание по правому краю
• start — выравнивание по начальному краю
• end — выравнивание по конечному краю
• center — выравнивание по центру
• justify — выравнивание по левому и по правому краю, увеличивается расстояние между буквами и пробелы, последняя строка не выравнивается
• match-parent — аналогично inherit, но значения start и end вычисляются в зависимости от значения direction родительского элемента
• inherit

text-justify — указывает тип выравнивания при значении text-align: justify

• none — отключает выравнивание текста
• auto — браузер сам выбирает наилучший тип выравнивания на основании используемого языка, качества отображения и производительности (значение по умолчанию)
• inter-word — для выравнивания добавляет расстояние между словами
• inter-character — для выравнивания добавляет расстояние между символами

text-align-last — задает горизонтальное выравнивание текста для последней строки

• auto — выравнивается по значению свойства text-align
• left, right, start, end, center, justify — значения аналогичны как у свойства text-align

line-height — задает высоту строки. Можно использовать число (значение по умолчанию 1.2) или единицы измерения css

Отступы, интервалы и переносы строк

word-spacing — устанавливает интервал между словами. Кроме ключевых слов значения можно указать в единицах измерения css (значение в процентах имеет плохую поддержку браузеров), значение может быть отрицательным

letter-spacing — устанавливает интервал между символами, правила и значения аналогичны word-spacing

text-indent — устанавливает отступ для первой строки в блоке. Значения указывается в единицах измерения css, значение может быть отрицательным

white-space — позволяет управлять переносами строк и пробелами

• normal — текст переносится по необходимости, лишние пробелы удаляются (значение по умолчанию)
• nowrap — запрещает перенос строк
• pre-wrap — текст переносится по необходимости, все пробелы сохраняются
• pre-line — текст переносится по необходимости, все лишние пробелы удаляются, кроме случаев с использованием
• break-spaces — аналогично pre-wrap, но все неудаляемые пробелы и переносы строк занимают место
• initial
• inherit

tab-size — указывает величину отступа табуляции (Tab), работает для тегов textarea и pre

• значение в единицах измерения css
• число указывающие число пробелов
• initial
• inherit

Обсуждение ( 0 )

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии

Источник