当文本换行到2行或更多行时，保持flexbox居中 [英] Keeping flexbox centered when text wraps to 2 or more lines

问题描述

我试图将两个 div 元素并排放在flexbox（ display：flex ） 。

第一个 div 元素在左侧只有一个图片。

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

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

当行的文本足够长，可以换行到第二行，第二个 div 元素不会包围自己的内容，如我所料。相反，它在 div 右侧留下一个大的空白。

我在这里嘲笑了一个例子：

如何设置第二个 div 元素缩小到适合文本，使 div 元素

 < div class = flexbox-container> 
< div class =div1> 
< img src =http://dreamatico.com/data_images/kitten/kitten-2.jpgwidth =150px> 
< / div> 
< div class =div2> 
这是一行文本的示例。 
< / div> 
< / div> 
< br> 
< div class =flexbox-container> 
< div class =div1> 
< img src =http://dreamatico.com/data_images/kitten/kitten-2.jpgwidth =150px> 
< / div> 
< div class =div2> 
这是一个很多loooooooooooooongonger文本行的例子。 
< / div> 
< / div> 
  

CSS：

 code> .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模型，显示我想做什么：

解决方案

为了实现您的目标（如第二张图片所示），我们需要对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.jpgwidth =150px> 
< / figure> 
< p>这是一行文本的示例。< / p> 
< / div> 
 
< div class =flex-container-child> 
< figure> 
< img src =http://dreamatico.com/data_images/kitten/kitten-2.jpgwidth =150px> 
< / figure> 
< p>这是一个很多loooooooooooongonger文本行的例子。< / 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; 
} 
  

在图像1中，所有flex项目实际上居中。 Chrome开发工具的蓝色亮点强调了这一点。

是的，当你调整屏幕尺寸时，会有点笨重–主要是因为大字体大小–但是flex项目仍然保持中心。

在图像2中，flex项目不均匀居中。您在模型中创建的内容更像是包含两个flexbox的列，并且列居中。

有关您的代码的几个注释：

1. 通过在f​​lex容器上声明的 justify-content ，您将以flex项目为中心。


2. 由于两个flexbox都是< body> 的直接子级，< body> 没有定义的宽度，Flexbox会根据视口对齐。

---

为了实现你想要的效果，我们可以将所有现有的标记包装在一个新的flex容器中（＃flex-container-main ）。这将原始的flex容器转换为flex项目，然后可以均匀为中心。

新的flex项目 .flex-container-child ）赋予宽度以创建空间，并基于图像的高度创建最小高度。每个flex项目也被声明为flex parent（ display：flex ），它允许我们在子元素上使用flex属性。特别是，这对于垂直居中文本（如图片中所示）非常有用。

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

最后（这可能不重要，你的布局，但只是为了防止），浏览器通常给图像在它们的底部边界下的一个小空白的空格。这用于容纳 descenders 。使用 vertical-align：bottom ，将删除此空间。 （有关详情，请参阅我对下拉菜单的回答。）

I am trying to center two div elements side by side in a row with flexbox (display:flex).

The first div element, on the left, just has an image.

The second div element, on the right, has left-aligned inline text of unspecified length.

When the line of text is short enough to fit on one line, both divs are aligned and justified to the center as I expect.

When the line of text is long enough to wrap onto two lines, the second div element does not wrap itself around the content as I expect. Instead, it leaves a large white space on the right side of the div.

I mocked up an example here: http://codepen.io/anon/pen/NGqYQX?editors=110. Vary your browser window's width to see what I mean.

How can I set the second div element to shrink itself to fit the text, so that both div elements appear centered?

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;
}

Here is a Photoshop mockup showing what I am trying to do:

解决方案

In order to achieve your goal (as specified in your second image) we need to make a few adjustments to your HTML and CSS. Everything can be done with 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

---

Here's what's happening...

Your question asks:

Keeping flexbox centered when text wraps to 2 or more lines

I am trying to center two div elements side by side in a row with flexbox (display:flex).

Let's quickly go over your two images.

Image 1

Image 2

In image 1 all flex items are actually centered. The blue highlight from Chrome Dev Tools emphasizes this point. Each item is perfectly centered on the screen.

Yes, it does get a bit clunky as you re-size the screen smaller – mostly because of the large font size – but the flex items remain centered nonetheless.

In image 2, the flex items are not evenly centered. What you've created in your mock-up is more like a column containing both flexboxes, and the column is centered. But individually only the first row is centered on the screen.

A couple of notes about your code:

1. With justify-content declared on the flex containers, you are centering the flex items. The flex container itself is not centered.
2. Since both flexboxes are direct children of the <body>, and <body> has no defined width, the flexboxes align themselves in relation to the viewport.

---

So to achieve the effect you want we can wrap all your existing mark-up in a new flex container (#flex-container-main). This converts the original flex containers into flex items, which can then be evenly centered as a group.

The new flex items (now classed as .flex-container-child) are given a width to create space and a minimum height based on the height of the image. Each flex item is also declared a flex parent (display: flex) which allows us to use flex properties on child elements. In particular, this is useful for vertically centering the text (as shown in your images).

(Note that my use of HTML semantic elements is not necessary for the code to work. If you prefer the original div tags just swap them back. The important adjustment is the new parent container.)

Lastly (and this may not be important to your layout but just in case), browsers normally give images a small gap of whitespace under their bottom border. This is used to accommodate descenders. With vertical-align: bottom, this space is removed. (For more details see my answer about descenders.)

这篇关于当文本换行到2行或更多行时，保持flexbox居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！