Question

我正在尝试将两个div元素并排放置在一起使用flexbox（display:flex）。

左边的第一个div元素只有一个图像。

右侧的第二个div元素具有未指定长度的左对齐内嵌文本。

当文本行足够短以适合一行时，两个div对齐并按照我的预期对齐到中心。

当文本行足够长以包裹到两行时，第二个div元素不会像我期望的那样将自己包裹在内容周围。相反，它会在div的右侧留下一个大的空白区域。

我在这里嘲笑了一个例子：http://codepen.io/anon/pen/NGqYQX?editors=110。改变浏览器窗口的宽度，看看我的意思。

如何设置第二个div元素以缩小自身以适合文本，以便div个元素都显示为居中？

HTML：

<div class="flexbox-container">   
    <div class="div1">
        <img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg" width="150px">
    </div>
    <div class="div2">
        This is an example of a line of text.
    </div> 
</div>
<br>
<div class="flexbox-container">
    <div class="div1">
        <img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg" width="150px">
    </div>
    <div class="div2">
        This is an example of a much loooooooooooooonger line of text.
    </div>
</div>

CSS：

.flexbox-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.div1 {
  margin-right: 30px;
}

.div2 {
  font-size: 48px;
  line-height: 48px;
  text-align: left;
}

这是一个Photoshop模型，展示了我要做的事情：

Answer 1

为了实现您的目标（在第二张图片中指定），我们需要对您的HTML和CSS进行一些调整。一切都可以用flexbox完成。

<强> HTML

<div id="flex-container-main">

    <div class="flex-container-child">
        <figure>
            <img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg" width="150px">
        </figure>
        <p>This is an example of a line of text.</p> 
    </div>

    <div class="flex-container-child">
        <figure>
            <img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg" width="150px">
        </figure>
        <p>This is an example of a much loooooooooooooonger line of text.</p>
    </div>

</div><!-- end #flex-container-main -->

<强> CSS

#flex-container-main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flex-container-child {
    display: flex;
    align-items: center;
    min-height: 127px;
    width: 75%;
    margin: 10px;
}

figure {
    margin: 0 20px 0 0;
    }

img {
    width: 150px;
    height: 127px;
    vertical-align: bottom;
} 

p { 
    font-size: 48px;
    margin: 0;
}

Revised Codepen Demo

以下是发生的事情......

你的问题是：

当文本换行到2行或更多行时保持flexbox居中

我试图用flexbox（display:flex）将两个div元素并排放在一行。

让我们快速浏览一下你的两张照片。

图片1

图片2

在图像1中，所有弹性项目实际上都居中。 Chrome Dev Tools的蓝色亮点强调了这一点。每个项目都完全集中在屏幕上。

是的，当您重新调整屏幕尺寸时，它确实变得有点笨重 - 主要是因为字体较大 - 但是Flex项仍然保持居中。

在图像2中，弹性项目不是均匀居中的。您在模型中创建的内容更像是包含两个Flexbox的列，而列是居中的。但是单独只有第一行以屏幕为中心。

关于您的代码的几点说明：

在弹性容器上声明justify-content时，您将使弹性项目居中。 Flex容器本身不居中。
由于两个flexbox都是<body>的直接子项，而<body>没有定义的宽度，因此flexbox会将自身与视口对齐。

因此，为了达到您想要的效果，我们可以将所有现有标记包装在新的Flex容器中（#flex-container-main）。这会将原始的Flex容器转换为弹性项目，然后可以均匀作为一个组居中。

新的弹性项目（现在归类为.flex-container-child）被赋予宽度以根据图像的高度创建空间和最小高度。每个弹性项目也被声明为flex父级（display: flex），它允许我们在子元素上使用flex属性。特别是，这对于垂直居中文本很有用（如图像所示）。

（请注意，我不需要使用HTML语义元素来使代码工作。如果您更喜欢原始的div标签，只需将它们交换回来。重要的调整是新的父容器。）

最后（这可能对您的布局不重要，但以防万一），浏览器通常会在底部边框下为图像提供一小部分空白。这用于容纳下行程序。使用vertical-align: bottom，此空间将被删除。（有关详细信息，请参阅my answer about descenders。）

当子文本换行到2行或更多行

1 个答案:

Revised Codepen Demo