FLEX разметка в CSS

Редакция автор: stain
 
display: flex; /*обязательный параметр для родителя, имеет второй вариант значение none */

/*Команды для родителей, влияющие на потомков*/

justify-content: /*по горизонтали*/ 
 flex-start /*Items align to the left side of the container. */
 flex-end /* Items align to the right side of the container. */
 center /* Items align at the center of the container. */
 space-between /* Items display with equal spacing between them. */ /*от друг друга*/ 
 space-around /* Items display with equal spacing around them. */ /*от друг друга и от краев экрана*/ 

align-content: /*по вертикали*/ 
 flex-start /* Items align to the top of the container. */
 flex-end /* Items align to the bottom of the container. */
 center /* Items align at the vertical center of the container. */
 space-between /* Items display with equal spacing between them. */ /*от друг друга*/ 
 space-around /* Items display with equal spacing around them. */ /*от друг друга и от краев экрана*/ 
 stretch /* Items are stretched to fit the container. */ /*растянуты*/

align-items: /*по вертикали*/ 
 flex-start /* Items align to the top of the container. */
 flex-end /* Items align to the bottom of the container. */
 center /* Items align at the vertical center of the container. */ 
 baseline /* Items display at the baseline of the container. */
 stretch /* Items are stretched to fit the container. */ /*растянуты*/

flex-direction:
 row /* Items are placed the same as the text direction. */ /*слева направо*/ 
 row-reverse /* Items are placed opposite to the text direction. */ /*справа налево*/ 
 column /* Items are placed top to bottom. */ /*из строки в колонку сверху вниз*/ 
 column-reverse /* Items are placed bottom to top. */ /*из строки в колонку, снизу вверх.*/

flex-wrap: 
 nowrap /* Every item is fit to a single line. */ /*Запрет переноса объектов */ 
 wrap /* Items wrap around to additional lines. */ /*перенос объектов нна следущую строку*/ 
 wrap-reverse /* Items wrap around to additional lines in reverse. */ /*перенос объектов снизу вверх*/

flex-flow: /*комбинирует flex-wrap и flex-direction можно использовать параметры обоих видов через пробел например flex-flow: row wrap;*/ 
 nowrap /* Every item is fit to a single line. */ /*Запрет переноса объектов */ 
 wrap /* Items wrap around to additional lines. */ /*перенос объектов нна следущую строку*/ 
 wrap-reverse /* Items wrap around to additional lines in reverse. */ /*перенос объектов снизу вверх*/ 
 row /* Items are placed the same as the text direction. */ /*слева направо*/ 
 row-reverse /* Items are placed opposite to the text direction. */ /*справа налево*/ 
 column /* Items are placed top to bottom. */ /*из строки в колонку сверху вниз*/ 
 column-reverse /* Items are placed bottom to top. */ /*из строки в колонку, снизу вверх.*/

/*Команды для потомков*/

order: /*...-1,0,1... смещает объект влево или вправо через объект*/

align-self: /*индивидуальное смещение объекта*/ 
 flex-start /* Items align to the top of the container. */
 flex-end /* Items align to the bottom of the container. */
 center /* Items align at the vertical center of the container. */ 
 baseline /* Items display at the baseline of the container. */
 stretch /* Items are stretched to fit the container. */ /*растянуты*/

В игровой форме можно потренироваться на лягушках и башнях.
Но лягушек не достаточно.
Очень неплохая статья с примерами, и дополнительными командами для объектов потомков!
Оптимизации для совместимости с различными браузерами
И отдельно по Опере
и еще ссылка.
Основные принципы, преимущества и недостатки
CSS-свойство display и контексты форматирования


Комментариев: 0