CSS flex-wrap — перенос флекс-елементів на новий рядок
Властивість flex-wrap визначає, чи повинні гнучкі елементи переноситися чи ні. Тобто елементи контейнера можна обгорнути на декілька рядків або розмістити їх в одному. За допомогою flex-wrap можна також задати напрямок, в якому будуть укладатися рядки.
Властивість flex-wrap визначає, чи елементи мають розташовутися примусово на одному рядку або можуть бути перенесені на наступний рядок. Якщо встановлено, щоб елементи переносилися на декілька рядків, властивість також визначає поперечну вісь, яка визначає напрям, за яким складаються нові рядки.
Нагадаємо: поперечна вісь - це вісь перпендикулярна головній осі.
автор: Svitlana
Загальний опис
автор: NagarD
- Порада
-
Якщо знесення рядків дозволено, тоді за допомогою властивості
автор: Svitlanaflex-directionможна контролювати напрямок, в якому будуть шикуватися гнучкі елементи. - Нотатка
-
Властивість
автор: Svitlanaflexпрацює тільки зі гнучкими елементами, тобто з тими елементами, у котрих властивістьdisplayвстановлена якflex(display: flex;абоdisplay: inline-flex).
Синтаксис
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;Властивість flex-wrap може отримувати 5 значень:
-
nowrap -
Знесення заборонене. Гнучкі елементи шикуються в одну лінію. Без задання.
автор: Svitlana -
wrap -
Гнучкі елементи шикуються в кілька рядків, їх напрямок задається властивістю
автор: Svitlanaflex-direction. -
wrap-reverse -
Гнучкі елементи шикуються в кілька рядків, в напрямку, протилежному
автор: Svitlanaflex-direction. -
initial -
Встановлює цю властивість в значення без задання
автор: Svitlana -
inherit -
Успадкує значення властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | nowrap |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.flexWrap="nowrap" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 29 | 28 | 9 | 16 | 12 | 11* |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 29 | 28 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
Інструмент
Показує, як властивості флекс-контейнера розставляють елементи.
Пісочниця Flexbox — окремою сторінкою, з поясненням пасток.
Шість блоків по 140px не вміщаються в рядок — wrap дозволяє їм перенестися. Без нього (nowrap, типово) вони б стискалися, аби влізти.
HTML
<div class="row">
<div>один</div>
<div>два</div>
<div>три</div>
<div>чотири</div>
<div>п'ять</div>
<div>шість</div>
</div>CSS
.row {
display: flex;
flex-wrap: wrap;
}
.row div {
width: 140px;
padding: 8px;
border: 1px solid #0172ad;
text-align: center;
}Простий приклад роботи властивості
HTML
<div class="wrapper">
<div class="gold">1</div>
<div class="red">2</div>
<div class="blue">3</div>
</div>CSS
* {
box-sizing: border-box;
}
.wrapper {
font-family: monospace;
color: #fff;
border: 2px solid #ddd;
display: flex;
width: 500px;
flex-wrap: wrap;
}
.wrapper > div {
padding: 56px 0 76px 0;
font-weight: 700;
font-size: 2em;
text-align: center;
height: 25%;
width: 50%;
}
.gold {
background-color: gold;
}
.red {
background-color: red;
}
.blue {
background-color: steelblue;
}Приклад роботи властивості
HTML
<div class="info">
<p>За допомогою властивості <code>flex-wrap</code> ми можемо визначити, чи повинні гнучкі елементи переноситися на наступні рядки.</p>
<p>Ви бачите три ідентичних блоки, але для них задані різні значення для <code>flex-wrap</code>: <em>wrap</em>, <em>nowrap</em> й <em>wrap-reverse</em> відповідно.</p>
</div>
<div class="wrapper">
<ul class="block one">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
<ul class="block two">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
<ul class="block three">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 15px;
line-height: 1.45;
}
.info {
padding: 6px;
}
code {
font-weight: 700;
color: #444;
border-bottom: 2px solid #666;
}
.wrapper {
display: flex;
justify-content: space-around;
}
.block {
background-color: #dedede;
padding: 0;
margin: 0;
width: 200px;
list-style: none;
display: flex;
}
.block li {
text-align: center;
background-color: gold;
margin: 2px;
width: 34px;
height: 34px;
line-height: 38px;
font-weight: 700;
}
.block.one {
flex-wrap: wrap;
}
.block.two {
flex-wrap: nowrap;
}
.block.three {
flex-wrap: wrap-reverse;
}Ті самі чотири елементи по 100px у контейнері 280px. Ліворуч nowrap (значення без задання) стискає їх нижче заданої ширини, праворуч wrap переносить на новий рядок.
HTML
<figure>
<div class="box nowrap">
<span>один</span><span>два</span><span>три</span><span>чотири</span>
</div>
<figcaption>flex-wrap: nowrap</figcaption>
</figure>
<figure>
<div class="box wrap">
<span>один</span><span>два</span><span>три</span><span>чотири</span>
</div>
<figcaption>flex-wrap: wrap</figcaption>
</figure>CSS
figure {
display: inline-block;
margin: 0 20px 0 0;
font: 12px monospace;
text-align: center;
vertical-align: top;
}
.box {
display: flex;
gap: 4px;
width: 280px;
padding: 4px;
border: 2px solid #0172ad;
}
.box span {
width: 100px;
padding: 8px 0;
background: #0172ad;
color: #fff;
text-align: center;
}
.nowrap {
flex-wrap: nowrap;
}
.wrap {
flex-wrap: wrap;
}HTML
<p>Цей приклад показує як працює властивість <code>flex-wrap</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити тип перенесення елементів нижче.</p>
<div class="inputs">
<input id="wrap" name="flex-wrap" type="radio"/>
<label for="wrap">wrap</label>
<message for="wrap">Гнучкі елементи шикуються в кілька рядків, їх напрямок задається властивістю flex-direction.</message>
<input id="nowrap" checked name="flex-wrap" type="radio"/>
<label for="nowrap">nowrap</label>
<message for="nowrap">Знесення заборонене. Гнучкі елементи шикуються в одну лінію. Без задання.</message>
<input id="wrap-reverse" name="flex-wrap" type="radio"/>
<label for="wrap-reverse">wrap-reverse</label>
<message for="wrap-reverse">Гнучкі елементи шикуються в кілька рядків, в напрямку, протилежному flex-direction.</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 class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
<div class="child">11</div>
<div class="child">12</div>
<div class="child">13</div>
<div class="child">14</div>
<div class="child">15</div>
<div class="child">16</div>
</div>CSS
* {
box-sizing: border-box;
padding: 0;
}
body {
font-family: system-ui, 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: 200px;
height: 100px;
margin: 4px;
line-height: 50px;
font-weight: 700;
}
message {
display: none;
}
.wm {
min-height: 100px;
}JS
document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {
var messageText = document.querySelector("message[for='" + this.id + "']");
document.querySelectorAll('#message').forEach((n) => n.textContent = messageText?.textContent ?? '');
document.querySelectorAll('#box').forEach((n) => n.style.setProperty('flex-wrap', this.id));
}));Демонстрація дії різних значень властивості
HTML
<p>Вибери потрібні значення для <code>flex-wrap</code>:</p>
<select id="form">
<option value="nowrap" name="value2" selected>nowrap</option>
<option value="wrap" name="value2">wrap</option>
<option value="wrap-reverse" name="value2">wrap-reverse</option>
</select>
<p id="text"></p>
<hr>
<div class="layout">
<header>
<h4>Simple website</h4>
</header>
<main>
<nav>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
</nav>
<section id="wrapper">
<div class="child child-1">1</div>
<div class="child child-2">2</div>
<div class="child child-3">3</div>
</section>
</main>
<footer>
© 2017
</footer>
</div>CSS
* {
box-sizing: border-box;
padding: 0;
}
body {
text-align: center;
font-family: monospace;
font-size: 17px;
line-height: 1.5;
color: #222;
}
#form {
padding: 8px 16px;
font-size: 19px;
}
header {
line-height: 75px;
text-align: center;
text-transform: uppercase;
background-color: #808080;
color: #f9f9f9;
}
main {
display: flex;
}
nav {
width: 30%;
background-color: yellow;
padding: 16px;
}
nav a {
display: block;
margin-bottom: 16px;
text-align: left;
text-decoration: none;
color: #151515;
}
#wrapper {
background-color: #eee;
display: flex;
flex-wrap: wrap;
height: 500px;
padding: 16px;
width: 70%;
}
.child {
height: 25%;
width: 50%;
color: #f1f1f1;
font-weight: 700;
border-radius: 4px;
background-color: #444;
border: 4px solid #666;
margin: 5px;
}
footer {
line-height: 50px;
background-color: #000;
color: #f1f1f1;
margin-top: 16px;
}JS
var wrapper = document.getElementById('wrapper');
var form = document.getElementById('form');
var text = document.getElementById('text');
var textArray = { 'nowrap': 'Знесення заборонене. Гнучкі елементи шикуються в одну лінію. За замовчуванням.',
'wrap': 'Гнучкі елементи шикуються в кілька рядків, їх напрямок задається властивістю flex-direction.',
'wrap-reverse': 'Гнучкі елементи шикуються в кілька рядків, в напрямку, протилежному flex-direction.' };
form.onchange = function change() {
var newVal = getNewValue();
wrapper.style.flexWrap = newVal;
text.innerHTML = textArray[newVal];
};
function getNewValue() {
var result = '';
for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
if (form.options[i].selected == true) {
result = form.options[i].value;
}
}window.CP.exitedLoop(0);
return result;
}
//# sourceURL=pen.jsКоментарі
Коментарів ще немає — будьте першим!