什么是“弯曲"?和“证明内容"实现“文本对齐"不是吗? [英] What do "flex" and "justify-content" achieve that "text-align" doesn't?
问题描述
这两种将按钮移动到其父级右侧的方法似乎与我完全相同.有没有理由选择一个而不是另一个?是否存在 flex 可以将内容向右对齐而 text-align 可能不够用的情况?
.parent {文本对齐:右；}<div class="parent"><button>很棒的按钮！</button></div>.parent {显示:弹性；justify-content: flex-end;}<div class="parent"><button>很棒的按钮！</button></div>我很好奇，因为我注意到 Bootstrap 在版本 3 和 4 之间从 text-align: right 更改为 flex，用于对齐模式页脚部分中的按钮.
进一步说明:
是的，有很大的不同.Flexbox 是关于框和块级元素，而 text-align 是关于文本和内联级元素.
当有一个元素时，我们不会注意到差异，但当涉及多个元素时，我们可以看到明显的差异.
这是一个基本示例，其中我们在容器中包含文本和按钮:
.parent-flex {显示:弹性；justify-content: flex-end;底边距:10px；}.父母正常{文字对齐:右；}<div class="parent-flex">这里有一些文字<button>很棒的按钮！</button></div><div class="parent-normal">这里有一些文字 <button>很棒的按钮！</button></div>注意在 flex 容器中我们如何在文本和按钮之间不再有空格，因为文本将成为块元素1 和按钮也是，这在第二个例子中不是这种情况其中两个都是内联元素.到目前为止，还可以，因为我们可以通过保证金纠正这一点.
让我们多放些文字再看看区别:
.parent-flex {显示:弹性；justify-content: flex-end;底边距:10px；}.父母正常{文字对齐:右；}<div class="parent-flex">这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字<button>很棒的按钮！</button></div><div class="parent-normal">这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字<button>很棒的按钮！</button>现在我们有了明显的区别，我们可以看到 flex 容器将所有文本视为块元素，按钮不会像第二个容器那样跟随文本.在某些情况下，这可能是预期的结果，但并非在所有情况下都是如此.
让我们在文本中添加一个链接:
.parent-flex {显示:弹性；justify-content: flex-end;底边距:10px；}.父母正常{文字对齐:右；}<div class="parent-flex">这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字这里有一些文本<a href="">link</a>这里有一些文字 这里有一些文字 这里有一些文字<button>很棒的按钮！</button></div><div class="parent-normal">这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 <a href="">link</a>这里有一些文字 这里有一些文字 这里有一些文字<button>很棒的按钮！</button></div>flexbox 容器越来越差！因为链接也被块化1，现在我们有 4 个块元素.链接之前的文本、链接、之后的文本和按钮.我们可以清楚地看到这种行为根本不是故意的.
基本上 flexbox 在对齐元素时很有用，我们可以将其视为块元素或容器或框等，但在涉及文本容器时则不然.text-align 在对齐前一个块/框/容器元素内的文本时更有用.
换句话说，text-align 应该在文本级别使用以对齐文本、图像等，并且应该在更高级别考虑使用 flexbox 来对齐块元素和创建布局.
在您的情况下，没有太大区别，因为我们可以将按钮视为框或内联元素.唯一的区别是在使用 text-align 时，如果您将它们视为内联元素，您将面临的按钮之间的空白.
<块引用>
1 简单来说，弹性容器的弹性项目是表示其流入内容的框.
弹性容器的每个流入子元素成为弹性项目，并且每个连续的子文本运行序列都被包裹在一个匿名块容器弹性项目中.但是，如果整个子文本序列只包含空格(即可能受 white-space 属性影响的字符)，则不会渲染它
flex item的显示值被屏蔽
我围绕同一主题写的一篇相关文章:https://dev.to/afif/never-make-your-text-container-a-flexbox-container-m9p
https://www.w3.org/TR/css-flexbox-1/#flex-items
These two ways to move a button to the right of its parent seem completely equivalent to me. Is there a reason to choose one over the other? Are there circumstances in which flex works to align content to the right where text-align might not suffice?
.parent {
text-align: right;
}
<div class="parent"><button>Awesome button!</button></div>
.parent {
display: flex;
justify-content: flex-end;
}
<div class="parent"><button>Awesome button!</button></div>
I'm curious because I noticed that Bootstrap changed from text-align: right to flex between versions 3 and 4 for aligning buttons in a modal's footer section.
To illustrate further:
Yes there is a big difference. Flexbox is about boxes and block level element whearas text-align is about text and inline level element.
When having one element we won't notice the difference but when it comes to multiple element we can see a clear difference.
Here is a basic example where we have text and button inside a container:
.parent-flex {
display: flex;
justify-content: flex-end;
margin-bottom:10px;
}
.parent-normal {
text-align:right;
}
<div class="parent-flex">some text here <button>Awesome button!</button></div>
<div class="parent-normal">some text here <button>Awesome button!</button></div>
Note how in the flex container we no more have white space between the text and the button because the text will become a block element1 and the button too which is not the case in the second example where both are inline element. Until now, it's ok because we can rectify this with margin.
Let's put more text and see the difference again:
.parent-flex {
display: flex;
justify-content: flex-end;
margin-bottom:10px;
}
.parent-normal {
text-align:right;
}
<div class="parent-flex">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here<button>Awesome button!</button></div>
<div class="parent-normal">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here<button>Awesome button!</button></div>
Now we have a clear difference and we can see that the flex container consider all the text as a block element and the button will not follow the text like in the second container. In some case it can be an intended result but not in all the cases.
Let's add a link inside our text:
.parent-flex {
display: flex;
justify-content: flex-end;
margin-bottom:10px;
}
.parent-normal {
text-align:right;
}
<div class="parent-flex">some text here some text here some text here some text here some text here some text here some text <a href="">link</a> here some text here some text here some text here<button>Awesome button!</button></div>
<div class="parent-normal">some text here some text here some text here some text here some text here some text here some text <a href="">link</a> here some text here some text here some text here<button>Awesome button!</button></div>
The flexbox container is getting worse! because the link is also blockified1 and now we have 4 block elements. The text before the link, the link, the text after and the button. We can clearly see that this behavior is not intended at all.
Basically flexbox is useful when it comes to align element that we can consider as block element or container or boxes, etc but not when it comes to text container. text-align is more useful to align text inside the previous block/box/container element.
In other words, text-align should be used at text level to align text, images, etc and flexbox should be considered at an upper level to align block element and create layouts.
In your case, there is no big difference since we can consider button as boxes or inline-element. the only difference will be the whitespace between the button that you will face if you consider them as inline element when using text-align.
1 Loosely speaking, the flex items of a flex container are boxes representing its in-flow contents.
Each in-flow child of a flex container becomes a flex item, and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item. However, if the entire sequence of child text runs contains only white space (i.e. characters that can be affected by the white-space property) it is instead not rendered
The display value of a flex item is blockified
A related article I wrote around the same subject: https://dev.to/afif/never-make-your-text-container-a-flexbox-container-m9p
https://www.w3.org/TR/css-flexbox-1/#flex-items
这篇关于什么是“弯曲"?和“证明内容"实现“文本对齐"不是吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
