Webkit box orient css

box-orient

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. See flexbox for information about the current standard.

The box-orient CSS property sets whether an element lays out its contents horizontally or vertically.

/* Keyword values */ box-orient: horizontal; box-orient: vertical; box-orient: inline-axis; box-orient: block-axis; /* Global values */ box-orient: inherit; box-orient: initial; box-orient: unset;

Syntax

The box-orient property is specified as one of the keyword values listed below.

Values

horizontal The box lays out its contents horizontally. vertical The box lays out its contents vertically. inline-axis (HTML) The box displays its children along the inline axis. block-axis (HTML) The box displays its children along the block axis.

The inline and block axes are the writing-mode dependent keywords which, in English, map to horizontal and vertical respectively.

Description

HTML DOM elements lay out their contents along the inline-axis by default. This CSS property will only apply to HTML elements with a CSS display value of box or inline-box .

Formal definition

Initial value	inline-axis ( horizontal in XUL)
Applies to	elements with a CSS display value of box or inline-box
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

horizontal | vertical | inline-axis | block-axis | inherit

Examples

Setting horizontal box orientation

Here, he box-orient property will cause the two sections in the example to display in the same line.

HTML

 
I will be to the left of my sibling.
 
I will be to the right of my sibling.
 

CSS

Result

Specifications

Browser compatibility

The compatibility table on this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Desktop						Mobile
Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
box-orient

Источник

Особенности –webkit-box или как «подружить» flexbox со старыми Safari

Уверен, многие Front End Developer-ы постоянно сталкиваются с проблемой поддержки flexbox в старых версиях популярных браузеров. Среди них выделяются два явных фаворита – Internet Explorer (IE) и Safari. С IE всё проще, т.к. flex поддерживается в версиях 10.0+. Версии ниже уже не актуальны, поэтому их часто игнорируют. В Safari же ситуация иная, поскольку поддержка современной спецификации flexbox (по мнению Caniuse.com) начинается с версии IOS Safari 9.2+.

Проблема именно в этом! Ведь по статистике Apple, только 47% обладателей iPhone имеют возможность использовать Safari 9.2+.

А что делать остальным?

Если мы делаем красивый, качественный и суперадаптивный сайт, построенный на flexbox — так же красиво и качественно он будет отображаться только на устройствах, которые его грамотно интерпретируют.

На помощь в этом приходит так называемый старый синтаксис flexbox – display: box;
Это аналог свойства display: flex; только он поддерживается всеми Safari, начиная с версии 5.0+.

1. Display: box работает только с префиксами, в данном случае с -webkit- (display: -webk2) it-box;).
2. Странно работает с float.
3. Аналогов некоторым современным свойствам нет.

Как же решить уже найденные проблемы?

Прописываем вендорные префиксы для box и связанным свойствам. Обтекания внутри box прячут элементы.

Эту ошибку пофиксить легко. Достаточно элементам, имеющим float, добавить свойство position: relative.

Почему бы просто не убрать float? – А вот почему:

Я приведу список всех рабочих аналогов flex-свойств и box-свойств:

-webkit-box-orient (flex-direction) – направление оси элементов.

Бывает нескольких видов в случае нового синтаксиса:

— column – колонка;
— row (по умолчанию) – строка;
— row-reverse – реверсия строки;
— column-reverse – реверсия колонки.

В случае старого синтаксиса я использую всего два свойства:

— vertical – колонка;
— horizontal – строка.

Есть еще два свойства, но они не работают как аналоги реверсивных свойств нового синтаксиса, поэтому я не использую их в своей практике.

Для реверса есть свойство -webkit-box-direction, которое имеет 2 значения – normal и reverse.

-webkit-box-pack (justify-content) – задает выравнивание по горизонтали.

— flex-start, flex-end – элементы прижаты к началу/концу родителя;
— space-between – распределяет элементы равномерно внутри родителя, не оставляя при этом боковых отступов;
— center – центрирует элементы.

— start, end – аналог flex-start, flex-end;
— justify – аналог space-between;
— center – то же, что и center в новом.

У space-around НЕТ аналога!

-webkit-box-align (align-items) – выравнивание по вертикали. По праву могу назвать это одним из главных достоинств flexbox.

— flex-start, flex-end – элементы прижаты к верху/низу родителя;
— baseline – дефолтное значение, выравнивание по базовой линии шрифта без учета свисаний;
— center – центрирует элементы;
— stretch – растягивает дочерние блоки по высоте.

— start, end – аналог flex-start, flex-end.

Остальные свойства идентичны

-webkit-box-ordinal-group (order) – определяет порядковый номер элемента в группе.
В обоих случаях задается цифрой.

Других вариантов либо нет, либо они не работают. Например:

-webkit-box-lines – это, по идее, аналог свойства flex-wrap, но у меня он почему-то не работает.

Если вам нужно применить любое CSS-свойство только для -webkit-, можете использовать рабочий CSS-хак. Он проверен и он РАБОТАЕТ:

@media all and (-webkit-min-device-pixel-ratio:0) < /*Всё, что вы сюда напишете, будет работать только с -webkit-*/ >

Делитесь своим опытом и удачи!

Автор статьи: Виктор Рябовол

Источник

CSS — box-orient

horizontal The box lays out its contents horizontally. vertical The box lays out its contents vertically. inline-axis (HTML) The box displays its children along the inline axis. block-axis (HTML) The box displays its children along the block axis.

The inline and block axes are the writing-mode dependent keywords which, in English, map to horizontal and vertical respectively.

Formal syntax

horizontal  title="Single bar" href code-leadattribute">#single_bar">|a> vertical  title="Single bar" href code-leadattribute">#single_bar">|a> inline-axis  title="Single bar" href code-leadattribute">#single_bar">|a> block-axis  title="Single bar" href code-leadattribute">#single_bar">|a> inherit

Description

The CSS box-orient property specifies whether an element lays out its contents horizontally or vertically. See Flexbox for more about the properties of flexbox elements.

For example, XUL box and hbox elements lay out their contents horizontally by default, but XUL vbox elements lay out their contents vertically by default.

HTML DOM elements lay out their contents along the inline-axis by default. This CSS property will only apply to HTML elements with a CSS display value of box or inline-box .

Initial value	inline-axis ( horizontal in XUL)
Applies to	elements with a CSS display value of box or inline-box
Inherited	no
Media	visual
Computed value	as specified
Animatable	no
Canonical order	the unique non-ambiguous order defined by the formal grammar

Browser Compatibility

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes) -webkit	(Yes) -moz [1]	No support	(Yes) -webkit	1.1 -khtml 3.0 -webkit

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	?	(Yes) -moz [1]	No support	?	1.0 -webkit

[1] In addition to the -moz prefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit , defaulting to false . Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true .

Notes

For XUL elements, if the orientation is set using the element’s orient attribute, then the style is ignored.

Источник