时间戳

首页 > 解决方案 > flex-basis: column,wrap 应该发生什么？

css - flex-basis: column,wrap 应该发生什么？

问题描述

我正在试验 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 方向时似乎没有效果：列。应该发生什么？如果我减小浏览器的垂直尺寸（意味着项目不适合），那么项目是否应该分成两列？如果我将浏览器的垂直尺寸减小到最小，那么会出现一个垂直滚动条？

我在这里阅读了 flex-wrap 的文档：https ://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap并且我看过这里：https ://css-tricks.com/片段/css/a-guide-to-flexbox/。我所看到的任何地方似乎都假设您在包装时使用的是行的弯曲方向。如果指定了列的弯曲方向，我找不到关于应该发生什么的解释。

标签： cssflexbox

解决方案

#example-element {
border: .75em solid;
padding: .75em;
width: 40%;
float: left;

display: flex;

flex-flow: column wrap;

}

#example-element>div {
background-color: rgba(0,0,255,.2);
border: 3px solid #00f;
width: 60px;
margin: 10px;
}

.short {
  background-color: tomato;
  height: 200px;
}

.tall{
  background-color: aquamarine;
  height: 400px;
}
<div id="example-element" class="transition-all short">
            <div>Item One</div>
            <div>Item Two</div>
            <div>Item Three</div>
            <div>Item Four</div>
            <div>Item Five</div>
            <div>Item Six</div>
        </div>
        
        <div id="example-element" class="transition-all tall">
            <div>Item One</div>
            <div>Item Two</div>
            <div>Item Three</div>
            <div>Item Four</div>
            <div>Item Five</div>
            <div>Item Six</div>
        </div>

推荐阅读