CSS Flexbox 水平对齐 1 个项目，垂直对齐 2 个项目答案

【问题标题】：CSS Flexbox align 1 item horizontally and 2 verticallyCSS Flexbox 水平对齐 1 个项目，垂直对齐 2 个项目
【发布时间】：2022-01-26 03:56:40
【问题描述】：

我有以下 HTML：

 <div class="icon-box">
    <div class="icon">
      <svg>...</svg>
    </div>
    <h3>Title here</h3>
    <p>Lorem ipsum dolor...</p>
 </div>

我的 CSS：

.icon-box {
  display: flex;
}

结果：

如何在不更改 HTML 的情况下使用 flexbox 获得以下内容：

我正在尝试将同一列上的图标左对齐，标题和段落右对齐。无需更改/添加新的 HTML。

【问题讨论】：

您只需要 SVG、H3 和 P 元素，其余的您可以使用 CSS 完成。除非您特别需要使用 flexbox，在这种情况下，如果没有两个文本元素的包装器，我认为您将无法完成此操作。
使用 CSS 网格布局。简单的解决方案。 HTML 没有变化。
将h3 和p 包装在div 中可以快速解决您的问题，但是为什么您不想更改html，

标签： css flexbox

【解决方案1】：

尝试在主父级上使用flex-direction: column;，在父级的子级上使用常规display: flex; (flex-direction: row;)。

.icon-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.icon {
  display: flex;
  gap: 10px;
}

<div class="icon-box">
    <div class="icon">
      <img src="https://dummyimage.com/50/000000/f2009d&text=SVG">
      <h3>Title here</h3>
    </div>
    <p>Lorem ipsum dolor...</p>
 </div>

【讨论】：

我没有投反对票，但在您的回答中，'.icon' 、 'h3' 、 'p' 放在一列！在这个问题中，CyberJ 提出了另一件事。
@ArmanEbrahimi 他在哪里要求“另一件事”？他想只使用弹性框将结果更改为所需的屏幕截图，而这正是我所做的。
@CyberJ 查看调整后的内容。
首先，您的“h3”标签超出了 div(.icon)。不过现在修好了。我希望@Cyber 接受你的回答:)
@ArmanEbrahimi 我也是！希望这是一个！

【解决方案2】：

您可以使用 grid（如果您不想更改 HTML）：

/*CSS*/

.icon-box {
  width: 250px;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 50px 50px;
}

.icon-box p {
  grid-column: 2 / 3;
}

<!--html-->

<div class="icon-box">
  <div class="icon">
    <svg>
        <rect width="100" height="50" style="fill: red" />
    </svg>
  </div>
  <h3>Title here</h3>
  <p>Lorem ipsum dolor...</p>
</div>

如果你想使用 flex，你必须将 'h3,p' 包裹在一个 div 中：

CSS：

.icon-box{
    display: flex;
    width: 300px;
    border: solid;
}
.text{
    width: 300px;
}

HTML：

 <div class="icon-box">
    <div class="icon">
      <svg>
        <rect width="100" height="50" style="fill: red" />
      </svg>
    </div>
    <div class="text">
      <h3>Title here</h3>
      <p>Lorem ipsum dolor...</p>
    </div>
 </div>

【讨论】：

我提供了两个解决方案。第一个解决方案，用于不改变 HTML（预期有问题），第二个解决方案，仅用于 'flex'（预期有问题）。那为什么要投反对票？有更好的解决方案吗？
问题询问如何使用 flexbox，而不是网格来做到这一点。也无需添加新的 HTML。
@CyberJ 没错，但我在这里想说的是，如果你不想更改 HTML，请使用 from 'grid'，如果必须使用 'flex'，则应更改 HTML。因为你在你的问题中想要两者。
还是不正确。问题只是寻找 flexbox 解决方案“我如何使用 flexbox 获得以下内容”