图像打破 Flexbox 网格

Question

我想创建一个弹性网格如下：

-------------------------------
| Menu |     Header Image     |
|      |-----------------------
|      |     Content          |
-------------------------------

所以我有这个：

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100px;
  justify-content: space-between;
}

.sidebar {
  width: 20%;
  flex-basis: 100%; 
  border: 1px solid red;
  background-color: yellow;
}

.header,
.content {
  width: 75%;
  flex-basis: 40%;
  border: 1px solid red;
}

和 html:

<div class="container">
  <div class="sidebar">
    <nav id="menu">
      ...
    </nav>
  </div>

  <div class="header">
    <div class="logo">
      <img src="/images/site/logo.jpg">
    </div>
  </div>

  <div class="content">
    <p>Content Here</p>
  </div>
</div>

布局在没有图像的情况下效果很好，但是有图像，即使它很小，它也会将 Content 项目放在 Header Image 旁边：

-----------------------------------------
| Menu |     Header Image     | Content |
|      |---------------------------------
|      |
-------

我试过了：


.logo img {
  box-sizing: border-box; 
  max-width:  80%;
  max-height: 100%;
  flex: 0 0 auto;
}

如果我将 max-width 调整为 20%，那么布局就可以了。图片不是那么宽或那么高，因此我很困惑为什么必须将它缩小到这么小才能正常工作。

Answer 1

如前所述，这种布局最好使用grid。但是可以用 flex 做到这一点，最好将 flex 视为一种为 div

的一行（或一列）设置样式的方式

你需要在 Flex 中处理一个“行”和几个“列”来实现你想要的当您尝试拥有两列时，您的错误是您在容器下使用了三个兄弟姐妹 container（弹性元素）中应该只有两个兄弟元素。

所以你需要

    <div class="flex-parent">
      <div class="col1"></div>
      <div class="col2"></div>
    </div>

举个例子：

<div class="container">
  <div class="sidebar">
    <nav id="menu">
      ...
    </nav>
  </div> 
  <div class="content-and-header-wrapper"> // added this div
    <div class="header">
      <div class="logo">
        <img src="/images/site/logo.jpg">
      </div>
    </div>
    <div class="content">
     <p>Content Here</p>
    </div>
  <div>

</div>

 col-1         col-2
-------------------------------
| Menu |     Header Image     |
|      |-----------------------
|      |     Content          |
-------------------------------

现在 col-2 应该是 flex 和 flex-direction: column; 里面有 2 divs（一个 col 有 2 行 ...）

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height:100px;
}
.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  height:100%;
  border:1px solid red;
}

img {
  height: 100%;
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  width: 30%;
}

  <div class='row'>
    <div class='column'>
      <div>
        Column One
      </div>
    </div>
    <div class='column'>
      <div>
        <img src="">
      </div>
       <div>
       Column Two
      </div>
    </div>
  </div>

图像打破 Flexbox 网格

Image breaking Flexbox grid

css

flexbox