柔性包装盒，在另一个柔性包装盒内包裹 [英] Flex box with wrap inside another Flex box

问题描述

我有一个垂直标题布局，其中左边是内容容器，右边是带有垂直标题的标题容器.而且我想在标题较长时将垂直标题换行到下一个垂直行.

I have a vertical title layout where the left is a content container, and the right is a title container with a vertical title. And I want the vertical title to wrap to the next vertical line when title is long.

我以为我可以用flex box做到这一点，但是结果是错误的.下面的代码段:

I thought I could achieve this with flex box, but the result is wrong. Code snippet below:

.flex{
  display:  flex;
  background-color:  red;
  width:  100%;
  height:  400px;
  justify-content:  flex-end;
}
.ctt{
  background-color:  yellow;
}
h3{
  max-height:  80%;
  display:  flex;
  flex-direction:  column;
  flex-wrap:  wrap;
  background:blue;
  align-self:  flex-end;
 }
h3 > span{
  color:  white;
  display:  block;
  white-space: pre;
  }

<div class="flex">
  <div class="ctt">
    some content
    </div>
  <h3 class="ttl">
    <span>A</span>
    <span> </span>
    <span>V</span>
    <span>e</span>
    <span>r</span>
    <span>y</span>
    <span> </span>
    <span>V</span>
    <span>e</span>
    <span>r</span>
    <span>y</span>
    <span> </span>
    <span>L</span>
    <span>o</span>
    <span>n</span>
    <span>g</span>
    <span> </span>
    <span>T</span>
    <span>i</span>
    <span>t</span>
    <span>l</span>
    <span>e</span>
    </h3>
  </div>

运行代码段时可以看到，确实发生了换行，但是看不到它.换行时，我需要将标题弹性项目(h3)展开，以便您可以看到标题的其余部分.

As you can see when running the code snippet, the wrap did happen, but you cannot see it. I need the title flex item (h3) to expand when a wrap happens so you can see the rest of the title.

此外，在Chrome浏览器中测试时，标题甚至都没有自动换行.但是我认为这是Chrome的问题，而不是代码的问题.

Also, testing in Chrome, the title doesn't even wrap. But I think this is Chrome's problem, not the code's problem.

我不介意使用flex box之外的其他方法，只要我能获得期望的结果即可.

I don't mind using methods other than flex box, as long as I get the desired result.

有关布局的更多信息:
标题应高出其容器的80％.
它应该与底部对齐.
它应该向右对齐.
当80％无法容纳它时，它应该绕到下一条垂直线(在右侧).
发生这种缠绕时，宽度显然会增大，并且内容(黄色框)应该向左推.

Some more info about the layout:
the title should be 80% tall of its container.
It should be aligned to the bottom.
It should be aligned to the right.
It should wrap to next vertical line (at the right) when 80% can no longer accommodate it.
When this wrap happens, obviously the width would grow, and content (the yellow box) should be pushed to the left.

我认为这可以通过CSS实现，因此请尽可能避免使用JavaScript.

I feel this is achievable with css, so avoid javascript if possible.

亲切的问候.

使用图表进行

我发现自己很不擅长解释事情.希望这两张图对您有所帮助.我希望.

I find myself very bad at explaining things. Hopefully these 2 diagrams help. I hope.

无论如何，第一个图表是我从Firefox获得的结果，Chrome甚至没有包装文字.

Anyway, the first diagram is the result I get from Firefox, Chrome does not even wrap the text.

图2是我要寻找的结果.到目前为止，包装是通过flex-wrap来实现的，但是在发生这种包装时，它并没有将容器推出.

Diagram 2 is the result I'm looking for. So far the wrapping is achieved with flex-wrap, but it does not push out the container when this wrapping happens.

推荐答案

.flex{height: auto;}

OR

h3{align-self: auto;}

这篇关于柔性包装盒，在另一个柔性包装盒内包裹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！