Question

我正在尝试使用svg +使用flexbox创建文本行，但遇到了问题。

当文本太长且需要2行时，svg会缩小。行数越多，缩小的越多

注意：svg目前是一个占位符

这是代码：

<div class="wrapper">

 <div class="container">
   <div class="svg"></div>
   <p>lorem</p>
 </div>

 <div class="container">
  <div class="svg"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
 </div>

</div>

还有CSS：

.wrapper {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  padding: 40px 12px;
 }

.container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
 }

.svg {
  margin-right: 20px;
  height: 20px; 
  width: 20px; 
  background-color: #DEDEDE;
 }

 p {
  margin: 0;
 }

这里是一个Codepen，因此您可以理解“缩小”的含义：https://codepen.io/anon/pen/YdWyBM?editors=1100

有什么想法吗？

谢谢

Answer 1

您的魔术是.svg {flex-shrink: 0;}。这就是您禁用flex子项收缩的方式。

.wrapper {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  padding: 40px 12px;
}

.container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.svg {
  margin-right: 20px;
  height: 20px; 
  width: 20px; 
  background-color: #DEDEDE;
  flex-shrink: 0;
}

p {
  margin: 0;
}

<div class="wrapper">
  
  <div class="container">
    <div class="svg"></div>
    <p>lorem</p>
  </div>
  
  <div class="container">
    <div class="svg"></div>
    <p>lorem</p>
  </div>
  
  <div class="container">
    <div class="svg"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
  </div>
  
  <div class="container">
    <div class="svg"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
  </div>
  
</div>

Answer 2

我将max-width:calc(100% - 40px)和p的{{1}}添加到margin-right:20px

width:20px

.wrapper {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  padding: 40px 12px;
 }

.container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
 }

.svg {
  margin-right: 20px;
  height: 20px; 
  width: 20px; 
  background-color: #DEDEDE;
 }

 p {
  margin: 0;
  max-width:calc(100% - 40px);
 }

多行文字使svg缩小

2 个答案: