Я экспериментирую с css и конкретно с этим HTML:
<!doctype html>
<html class="no-js" lang="en">
<head>
</head>
<body>
<header>
<div class="child">
<h1>Some random text</h1>
</div>
<ul class="child">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="child">
<input type="text" name="search" id="search">
</div>
</header>
</body>
</html>
и этот CSS:
html, body {
height:100%;
background:#1c1c1c;
width:200%;
}
header {
display:flex;
background:#000;
padding-top:18px;
justify-content:space-around;
flex-flow: column wrap;
}
wrap, похоже, не имеет никакого эффекта при использовании направления гибкости: столбец. Что должно произойти? Если я уменьшу вертикальный размер браузера (что означает, что элементы не помещаются), должны ли элементы переноситься в две колонки? Если я уменьшу вертикальный размер браузера до минимума, появится вертикальная полоса прокрутки?
Я прочитал документы для flex-wrap здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap и я посмотрел здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/. Везде, где я смотрю, кажется, что вы используете гибкое направление строки при переносе. Я не могу найти объяснение того, что должно произойти, если указано направление изгиба столбца.
