Jump to content

Поменять местами div блоки вертикально. Flexbox CSS.


Печенег

364 views

 Share

Краткая заметка по вертикальной смене порядка блоков <div> и других элементов документа html:

Поддержка браузерами

IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Chrome: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

 

HTML

<div class="group_block">
    <div class="block_1">1й элемент</div>
    <div class="block_2">2й элемент</div>
    <div class="block_3">3й элемент</div>
</div>

CSS

.group_block {
    display: flex;
    flex-direction: column;
    /* flex-direction: column-reverse; /* Включает обратный порядок */
}

.group_block .block_1 {order: 3; } /* Отобразится третьим */
.group_block .block_2 {order: 2; } /* Отобразится вторым  */
.group_block .block_3 {order: 1; } /* Отобразится первым  */

 

 

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. По ссылке ниже можно ознакомиться более подробно.

https://html5book.ru/css3-flexbox/

 Share

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

General chat

Please enter your display name

×
×
  • Create New...

Important Information

Продолжая использовать Веб-сайт ostogramm.ru Вы автоматически соглашаетесь с Privacy Policy и Guidelines, в ином случаи просто покиньте его.