<link href='https://fonts.googleapis.com/css?family=Fira+Sans' rel='stylesheet' type='text/css'>
<p>Цей приклад показує як працює властивість <code>flex-direction</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити значення властивості.</p>
<div class="inputs">
<input id="row" name="flex-direction" type="radio"/>
<label for="row">row</label>
<message for="row">Головна вісь спрямована так само, як і орієнтація тексту, за замовчуванням зліва направо. Якщо значення dir задано як rtl, то напрямок осі йде справа наліво.</message>
<input id="row-reverse" checked name="flex-direction" type="radio"/>
<label for="row-reverse">row-reverse</label>
<message for="row-reverse">Схоже на значення row, але міняються місцями початкова і кінцева точки і головна вісь спрямована справа наліво. Якщо значення dir задано як rtl, то напрямок осі йде зліва направо.</message>
<input id="column" name="flex-direction" type="radio"/>
<label for="column">column</label>
<message for="column">Флекс елементи відображаються у вигляді стовпчика. Стовпчик формується зверху вниз.</message>
<input id="column-reverse" name="flex-direction" type="radio"/>
<label for="column-reverse">column-reverse</label>
<message for="column-reverse">Головна вісь розташовується вертикально, але змінюється положення початкової і кінцевої точок і вісь спрямована знизу вгору.</message>
</div>
<div class="wm">
<p id="message"></p>
</div>
<hr>
<div id="box">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
</div>* {
box-sizing: border-box;
padding: 0;
}
body {
font-family: 'Fira Sans', sans-serif;
}
#box {
margin-top: 25px;
line-height: 1.45;
width: 100%;
display: flex;
background-color: gold;
padding: 4px;
}
.child {
background-color: #444;
color: #999;
text-align: center;
width: 50px;
height: 50px;
margin: 4px;
line-height: 50px;
font-weight: 700;
}
message {
display: none;
}
.wm {
min-height: 100px;
}var $message = $('#message');
$('.inputs').find('input').on('change', function() {
var $messageText = $("message[for='"+$(this).attr('id')+"']")
$message.text($messageText.text());
$('#box').css('flex-direction', $(this).attr('id'));
});
External CSS
This Pen doesn't use any external CSS resources.