Question

我尝试调整一些动态内容，使其适合要打印的标签。

标签有一行（.symbolContainer），可以包含0个或更多图像。目标是缩小.symbolContainer和那些图像，如果.text框的内容需要更多空格。

编辑：图像行不应该换行，但要从75px缩小到最低25px。

在我看来，Flexbox是最佳选择，它最终有3级嵌套的flexbox，但.symbolContainer中的图像不会缩小。

.text div的内容可以溢出.body div，但我会用javascript调整字体大小。

可以使用flexbox或其他技巧来实现这一目标吗？

这是我到目前为止所做的。 CSS中的评论是我想要做的。

.container {
  width: 3.5in;
  height: 5in;
  border: 1px solid black;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}

.title {
  font-weight: bolder;
  font-size: 24px;
  text-align: center;
}

.body {
  background-color: #aad9fa;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.symbolContainer {
  display: flex;
  justify-content: center;
  background-color: #c1f1bf;
  flex: 0 1 75px;
  /* Height is 75px but shrink if need to */
  /* No minimum height because can be empty */
}

.symbolContainer>img {
  flex: 0 1 75px;
  /* Size start at 75 px then shrink */
  min-width: 25px;
  /* but don't shrink pass 25px */
  align-self: flex-start;
}

.text {
  font-size: 22px;
  flex: 1;
  /* Take maximum possible space */
}

.footer {
  text-align: center;
  height: 30px;
  background-color: green;
}

<div class='container'>
  <div class='title'>
    A title that can be multiline because of his variable length
  </div>
  <div class='body'>
    <div class='symbolContainer'>
      <img src="https://simdut.claurendeau.qc.ca/public/img/vector/flamme.svg">
      <img src="https://simdut.claurendeau.qc.ca/public/img/vector/nocif.svg">
    </div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum risus ex, nec gravida augue iaculis vel. Nam malesuada vitae libero ac tempus. Aenean et ipsum ac justo malesuada venenatis. Proin consequat tellus et varius mattis. Vestibulum
        cursus dui in tincidunt pellentesque. Nullam feugiat lacus sem, et dapibus sapien maximus eu.
      </p>
      <p>Vivamus ullamcorper odio ex, sed rhoncus tellus sagittis eu. Proin egestas erat metus, sed congue dolor efficitur ac. Fusce ultrices quis urna vel tristique. Ut fermentum ipsum tellus, vel accumsan dui malesuada nec. Vivamus aliquam justo vel tortor
        luctus, non venenatis lectus sagittis. Morbi feugiat sem nec elit varius ultricies.</p>
    </div>
  </div>
  <div class='footer'>
    This is the footer. Can be fixed height
  </div>
</div>

Answer 1

为了使图像响应，您不需要Flex Container的这些图层。

符号容器应为：

.symbolContainer{
 min-width: 0; /* resize as what you want */
 margin: 5px; /* resize as what you want */
}

img {
width: 450px; /* resize as what you want */
max-width: 100%; /* resize as what you want */ 
max-height: 450px; /* resize as what you want */
}

.imgContainer{
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}

现在html应该改为：

 <div class='body'>
   <div class='imgContainer'>
      <div class='symbolContainer'>
        <img src="https://simdut.claurendeau.qc.ca/public/img/vector/flamme.svg">
        <img src="https://simdut.claurendeau.qc.ca/public/img/vector/nocif.svg">
      </div>
   </div>
...

那应该做你想要的。请注意调整大小以满足您的需求。

希望它有所帮助！

概率pd。它基于这篇文章：

https://medium.com/@sashatran/check-out-the-page-here-7d71a2c43a10

在嵌套的Flexbox容器内缩小包含图像的flexbox

1 个答案: