在half中的flexbox垂直拆分容器 [英] flexbox vertically split container in HALF

问题描述

任何人都可以告诉我如何使右上容器和右下容器具有相同的高度，并将红色容器垂直分割50-50％.不管里面的内容是什么.我尝试拉伸内容并包裹它们，同时保持flex-direction: row以使项目保持相同的高度，但我迷路了.

Can anyone tell how can I make right top container and right bottom container to have the same height and to split the red container 50-50% vertically. No matter what is the content inside. I tried stretching content and have them wrapped while keeping flex-direction: row to keep same height for items but I'm lost.

我希望的是:右上容器的高度与右下容器的高度相同，这当然也会导致左容器自动增长.

What I expect: right top container grows the same height as right bottom which also results the left container growing automatically of course.

这是我到目前为止所拥有的: http://jsbin.com/rozoxoneki/编辑?html，css，输出

This is what I have so far: http://jsbin.com/rozoxoneki/edit?html,css,output

.flex{
  display: flex;
  border: 5px solid red;
  &-child{
    background: green;
    border: 2px solid yellow;
    flex: 1;
  }
}

.flex--vertical{
  flex-direction: row;
  flex-wrap: wrap;

  > .flex-child{
    min-width: 100%;
  }
}


<div class="flex">
  <div class="flex-child">
    left
  </div>
  <div class="flex-child flex flex--vertical">
    <div class="flex-child">
      <h1>right top</h1>
    </div>
    <div class="flex-child">
      <h1>right bottom</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem esse iste voluptate eum ex mollitia temporibus unde eveniet omnis, vel, corrupti sed nobis consequatur quaerat ad sequi aliquid nostrum?</p>
    </div>
  </div>
</div>

推荐答案

直觉上，人们希望这对于主容器的flex-direction: column以及左容器的高度设置为100％都可以.

Intuitively one would expect that this would work just with a flex-direction: column for the main container and the left container's height set to 100%.

相反，所有浏览器都这样做:(这是另一个

Instead all browser do this: (this is a quote from another stackoverflow question)

所有主流浏览器如何可能将flex容器 在行方向上展开而不在列方向上展开?

How is it possible that all major browsers got the flex container to expand on wrap in row-direction but not in column-direction?

因此，您可以做的是将两个正确的容器包装到一个新容器中:

So what you can do is wrap the two right containers into a new one:

类似于此HTML-模式:

Like this HTML - schema:

<div class="main-container">
    <div class="left-container">Left container</div>
    <div class="right-container">
        <div class="half-containers">Top right</div>
        <div class="half-containers">Bottom right</div>
    </div>
</div>

这里是 jsfiddle 的示例，您可以根据期望的结果来设置样式.

Here is a jsfiddle as an example how you could style it for the expected result.

在此示例中，主容器"设置为主体的50％宽度和75％的高度.

In this example the 'main-container' is set to 50% width and 75% height of the body.

这篇关于在half中的flexbox垂直拆分容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！