flexbox div文本不与子元素对齐答案

【问题标题】：flexbox div text not align inline with child elementflexbox div文本不与子元素对齐
【发布时间】：2022-01-23 15:08:33
【问题描述】：

考虑以下 sn-p：

div {
  display: flex;
  flex: 0 0 45%;
  max-width: 45%;
}

&lt;div&gt;Lorem ipsum dolor sit amet, &lt;strong&gt;dolor sit&lt;/strong&gt;tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.&lt;/div&gt;

目前看起来像 enter image description here

但我想对齐 enter image description here

【问题讨论】：

永远不要让你的文本容器成为 flexbox 容器：dev.to/afif/…
不使用 flex 也可以做到。

标签： html css flexbox

【解决方案1】：

你可以用另一个 div 包裹起来。

.wrapper {    
    max-width: 45%;
    display: flex;
    flex: 0 0 45%;
}

<div class="wrapper">
  <div>
    Lorem ipsum dolor sit amet, <strong >dolor sit</strong> tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.
  </div>
</div>

.flex-container {    
    max-width: 45%;    
    flex: 0 0 45%;    
    display: flex;
}
.flex-container div {
  background: gray;
  padding: 10px;
  margin: 10px;
}
.w {    
   color: green;
  position: relative;
}

<div class="flex-container">
  <div>  
      Lorem ipsum dolor sit amet, <strong class="w">dolor sit</strong> tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.  
  </div>

  <div>  
      Lorem ipsum dolor sit amet, <strong class="w">dolor sit</strong> tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.  
  </div>
</div>

【讨论】：

谢谢 Maik，它正在工作，但我在页面上有很多这样的元素，我需要使用 CSS 进行调整，另一个解决方案是我可以更改显示属性。但我正在寻找 flex 属性是否有任何可能的解决方案。
@Milind 我想不出任何你应该这样做的场景。 Display: flex 用于影响子元素的包装器。我已经更新了我的答案以明确表示。

【解决方案2】：

你不需要 flex 来使 div 居中。您可以使用margin 执行此操作。检查以下代码 sn-p。

div {
    background:gray;
    width:45%;
    margin-left:auto;
    margin-right:auto;
}

&lt;div&gt;Lorem ipsum dolor sit amet, &lt;strong&gt;dolor sit&lt;/strong&gt;tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.&lt;/div&gt;

【讨论】：

【解决方案3】：

div {
    float: left;
    max-width: 45vw;
}

【讨论】：