问使用flex-basis: column，wrap会发生什么？
EN

Stack Overflow用户

提问于 2020-09-12 00:21:33

回答 1查看 41关注 0票数 1

我正在尝试使用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在使用: column的可变方向时似乎没有任何效果。应该会发生什么呢？如果我减小了浏览器的垂直大小(意味着项目不适合)，那么这些项目是否应该换成两列？如果我将浏览器的垂直尺寸减小到最小，那么会出现一个垂直滚动条吗？

我已经在这里阅读了flex-wrap的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap，我在这里查看了：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。我所看到的每一个地方，似乎都假设你使用的是柔化方向的row if包装。如果指定了列的弯曲方向，我找不到应该发生什么的解释。

flexbox

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-12 00:35:01

#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>

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63850834

复制

相似问题

问使用flex-basis: column，wrap会发生什么？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用flex-basis: column，wrap会发生什么？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用flex-basis: column，wrap会发生什么？
EN