居中并右对齐flexbox元素 [英] Center and right align flexbox elements

问题描述

我想拥有 A B 和 C

如何获得 D 完全向右？

BEFORE：

之后：

什么是这是最好的做法吗？

  ul {padding：0; margin：0;显示：flex; flex-direction：row; justify-content：center; align-items：center;} li {display：flex; margin：1px; padding：5px; background：#aaa;} li：last-child {background：#ddd; / *魔法向右抛出* /}  

  ; ul> < li> A< / li> < li> B< / li> < li> C< / li> < li> D< / li>< / ul>  

https://jsfiddle.net/z44p7bsx/

方法＃1：CSS定位属性

将位置：相对应用于flex容器。

应用 position：absolute 到项目D。

现在这个项目绝对定位在flex容器内。

更具体地说，项目D从文档流程中删除，但仍保持在 最近的祖先

使用CSS偏移属性 top 和 right 将此元素移动到位。

< pre class =snippet-code-css lang-css prettyprint-override> li：last-child {position：absolute; top：0; right：0; background：#ddd;} ul {position：relative; padding：0; margin：0;显示：flex; flex-direction：row; justify-content：center; align-items：center;} li {display：flex; margin：1px; padding：5px; background：#aaa;} p {text-align：center; margin-top：0;} span {background-color：aqua;}

 < ul> < li> A< / li> < li> B< / li> < li> C< / li> < li> D< / li>< / ul>< p>< span> true中心< / span>< / p>  

>

一个警告是某些浏览器可能无法从正常流程中完全删除绝对定位的flex项目。这将以非标准，意想不到的方式更改对齐方式。更多详细信息： 绝对定位的Flex项目未从Firefox中的正常流程中删除

方法＃2：Flex自动边距&方法＃2：

---

不可见Flex项目（DOM元素）

结合使用 auto 边距和一个新的，不可见的flex项目。

更具体地说，因为flex对齐是基于free的分布空间，新项目是必要的平衡，以保持三个中间框水平居中。新项目的宽度必须与现有D项目的宽度相同，否则中间的框不会精确对中。

新项目从视图中移除， visibility：hidden 。

简而言之：

• 创建 D 元素的副本。


• 将它放在列表的开头。


• 使用flex auto 边距保留 A ， code>和 C 居中， D 元素从两端创建均衡。

• 向重复的 D
应用 visibility：hidden


  li：first-child {margin-right：auto ; visibility：hidden;} li：last-child {margin-left：auto; background：#ddd;} ul {padding：0; margin：0;显示：flex; flex-direction：row; justify-content：center; align-items：center;} li {display：flex; margin：1px; padding：5px; background：#aaa;} p {text-align：center; margin-top：0; } span {background-color：aqua; }  

 < ul& < li> D< / li><！ -  new;不可见间隔物项 - < li> A< / li> < li> B< / li> < li> C< / li> < li> D< / li>< / ul>< p>< span> true中心< / span>< / p>  

>

---

方法3：Flex Auto Margins&不可见的Flex项目（伪元素）

此方法类似于＃2，除了它在语义上更干净，宽度 D 必须已知。

• 创建与 D 。


• 将 :: before 放在容器的开头。


• 使用flex auto 边距保留 A ， B 和 C 完全居中，使用伪元素和 D 元素从两端创建相等的平衡。

  ul :: before {content： D; margin：1px auto 1px 1px; visibility：hidden; padding：5px; background：#ddd;} li：last-child {margin-left：auto; background：#ddd;} ul {padding：0; margin：0;显示：flex; flex-direction：row; justify-content：center; align-items：center;} li {display：flex; margin：1px; padding：5px; background：#aaa;} p {text-align：center; margin-top：0; } span {background-color：aqua; }  

 < ul& < li> A< / li> < li> B< / li> < li> C< / li> < li> D< / li>< / ul>< p>< span> true中心< / span>< / p>  

>

---

其他注意事项：

• 与Flex容器的横轴不同，具有用于定位各个flex项目的 align-self 属性，没有类似的属性，例如 justify-self ，用于主轴 。


• 如上所述，解决方案是使用绝对定位或 flex auto 边距，以便在主轴中对齐各个flex项目。


• 对齐通过在容器中分配可用空间来工作，可以插入不可见的flex项目以创建相等的平衡。


• 重要的是这些幻影项目具有完全相同的长度作为它们意味着平衡的元素。否则，将不会有平衡余额，中间项将不会完全居中。

I would like to have A B and C aligned in the middle.

How can I get D to go completely to the right?

BEFORE:

AFTER:

What's the best practice for doing this?

ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
li:last-child {
  background: #ddd;
  /* magic to throw to the right*/
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

https://jsfiddle.net/z44p7bsx/

解决方案

Here are three options for achieving this layout:

Method #1: CSS Positioning Properties

Apply position: relative to the flex container.

Apply position: absolute to item D.

Now this item is absolutely positioned within the flex container.

More specifically, item D is removed from the document flow but stays within the bounds of the nearest positioned ancestor.

Use the CSS offset properties top and right to move this element into position.

li:last-child {
  position: absolute;
  top: 0;
  right: 0;
  background: #ddd;
}
ul {
  position: relative;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
p {
  text-align: center;
  margin-top: 0;
}
span {
  background-color: aqua;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>true center</span></p>

One caveat to this method is that some browsers may not completely remove an absolutely-positioned flex item from the normal flow. This changes the alignment in a non-standard, unexpected way. More details: Absolutely positioned flex item not being removed from normal flow in Firefox

---

Method #2: Flex Auto Margins & Invisible Flex Item (DOM element)

With a combination of auto margins and a new, invisible flex item the layout can be achieved.

The new flex item is identical to item D and is placed at the opposite end (the left edge).

More specifically, because flex alignment is based on the distribution of free space, the new item is a necessary counterbalance to keep the three middle boxes horizontally centered. The new item must be the same width as the existing D item, or the middle boxes won't be precisely centered.

The new item is removed from view with visibility: hidden.

In short:

• Create a duplicate of the D element.
• Place it at the beginning of the list.
• Use flex auto margins to keep A, B and C centered, with both D elements creating equal balance from both ends.
• Apply visibility: hidden to the duplicate D

li:first-child {
  margin-right: auto;
  visibility: hidden;
}
li:last-child {
  margin-left: auto;
  background: #ddd;
}
ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
p { text-align: center; margin-top: 0; }
span { background-color: aqua; }

<ul>
  <li>D</li><!-- new; invisible spacer item -->
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>true center</span></p>

---

Method #3: Flex Auto Margins & Invisible Flex Item (pseudo-element)

This method is similar to #2, except it's cleaner semantically and the width of D must be known.

• Create a pseudo-element with the same width as D.
• Place it at the start of the container with ::before.
• Use flex auto margins to keep A, B and C perfectly centered, with the pseudo and D elements creating equal balance from both ends.

ul::before {
  content:"D";
  margin: 1px auto 1px 1px;
  visibility: hidden;
  padding: 5px;
  background: #ddd;
}
li:last-child {
  margin-left: auto;
  background: #ddd;
}
ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
p { text-align: center; margin-top: 0; }
span { background-color: aqua; }

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>true center</span></p>

---

Additional notes:

• Unlike the cross axis of a flex container, which has the align-self property for positioning individual flex items, there is no similar property, such as justify-self, for the main axis.
• As described above, the solution is to use absolute positioning or flex auto margins to align individual flex items in the main axis.
• Since flexbox alignment works by distributing free space in the container, invisible flex items can be inserted to create equal balance.
• It's important that these "phantom" items be exactly the same length as the element they are meant to balance out. Otherwise, there won't be equal balance and the middle items will not be perfectly centered.

这篇关于居中并右对齐flexbox元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！