如何保持中心框居中在弹性框布局？ [英] How can you keep the center box centered in a flex box layout?

问题描述

想象下面的布局，其中的点代表框之间的空格：

  [左框] ...... [中框] ...... [右框] 
  

当我移除正确的方块时，我喜欢中心方块仍在中心，例如：

  [左框] ...... [中心框] ................. 
  

如果我删除左侧框，同样如此。

  ..... [中心框] ............... 。
  

现在，当中心框内的内容变长时，会占用尽可能多的可用空间需要而保持居中。左和右框不会收缩，因此当没有剩余空间时， overflow：hidden 和 text-overflow：ellipsis 将会生效打破内容;

  [左框] [中心框xxxxxxxxxxxxx] [右框] 
  

以上都是我的理想情况，但我不知道如何完成这个效果。因为当我创建一个这样的flex结构：

  .parent {
 display：flex; // flex box 
 justify-content：space-between; // horizo​​ntal alignment 
 align-content：center; //垂直对齐
} 
  

如果左右框都是完全相同的大小，我得到所需的效果。

有没有人可以帮助我？

更新

justify-self 很好，这将是理想的：

  .leftBox {
 justify-self：flex-start; 
} 
 
 .rightBox {
 justify-self：flex-end; 
} 
  

解决方案

使用嵌套的flex常量和 auto 边距：

  .container {display：flex;}。显示：flex; justify-content：center;}。box：first-child> span {margin-right：auto; } .box：last-child> span {margin-left：auto; } / * non-essential * /。box {align-items：center; border：1px solid #ccc;背景颜色：lightgreen; height：40px;}  

 < div class = > < div class =box>< span>短文字< / span>< / div> < div class =box>< span>居中文字< / span>< / div> < div class =box>< span> loooooooooooooooong text< / span>< / div>< / div>  

它的工作原理：

• 顶层div .container ）是一个flex容器。


• 每个子div（ .box



• 现在项目正在占用行中的所有空间，并且宽度相等。


• 每个项目a（嵌套）flex容器并添加 justify-content：center 。


• / code>元素是一个居中的弹性项。


• 使用flex auto > span 左右。

这是因为根据规范， auto margin优先于 justify-content ：

8.1。与自动对齐
边距





c $ c> justify-content 和 align-self ，任何
正空闲空间分布到该维度的自动边距。 / p>

---

旧答案

使用绝对定位和不可见的间隔项。

如果左右框都是完全相同的大小，影响。但是，当其中一个来自不同的大小
时，中心框不再真正居中。

。如果左对齐和右对齐框具有不同的大小，则 justify-content：space-between （和 space- around



但是，flexbox规范允许绝对定位的flex children 。

因此，如果我们使用 justify-content：space-between 布局flex项目，绝对地将一个项目放在中心，并在中间放置一个不可见的所有可用宽度（ flex-grow：1 ），居中的项目将始终保持居中中心–即使相邻的物品被移除或具有不同的宽度–

 < div id =container> 
< div class =box box1>< / div> 
< div class =box box2>< / div> 
< div class =box box3>< / div> 
< div class =box box4>< / div> 
< / div> 
  

CSS （不包括装饰风格）

  #container {
 display：flex; 
 justify-content：space-between; 
 position：relative; / *建立最近的定位祖先为abs。定位* / 
 height：80px; 
} 
 
 .box {
 height：50px; 
 width：50px; 
} 
 
 .box2 {/ *从正常流程中删除此框并移动到中心* / 
 position：absolute; 
 left：calc（50％ -  25px）; 
} 
 
 .box3 {/ * invisible flex item以最小化屏幕上的重叠* / 
 flex-grow：1; 
 flex-shrink：1; 
 flex-basis：250px; 
 / *简写为：flex：1 1 250px; * / 
 visibility：hidden; 
} 
  

DEMO： http://jsfiddle.net/uqLrkc1m/

Imagine the following layout, where the dots represent the space between the boxes:

[Left box]......[Center box]......[Right box]

When I remove the right box, I like the center box to still be in the center, like so:

[Left box]......[Center box].................

The same goes for if I would remove the left box.

................[Center box].................

Now when the content within the center box gets longer, it will take up as much available space as needed while remaining centered. The left and right box will never shrink and thus when where is no space left the overflow:hidden and text-overflow: ellipsis will come in effect to break the content;

[Left box][Center boxxxxxxxxxxxxx][Right box]

All the above is my ideal situation, but I have no idea how to accomplish this effect. Because when I create a flex structure like so:

.parent {
    display : flex; // flex box
    justify-content : space-between; // horizontal alignment
    align-content   : center; // vertical alignment
}

If the left and right box would be exactly the same size, I get the desired effect. However when one of the two is from a different size the centered box is not truly centered anymore.

Is there anyone that can help me?

Update

A justify-self would be nice, this would be ideal:

.leftBox {
     justify-self : flex-start;
}

.rightBox {
    justify-self : flex-end;
}

解决方案

Updated Answer

Use nested flex constainers and auto margins:

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}
.box:first-child > span { margin-right: auto; }
.box:last-child > span { margin-left: auto; }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="container">
  <div class="box"><span>short text</span></div>
  <div class="box"><span>centered text</span></div>
  <div class="box"><span>loooooooooooooooong text</span></div>
</div>

Here's how it works:

• The top-level div (.container) is a flex container.
• Each child div (.box) is now a flex item.
• Each .box item is given flex: 1 in order to distribute container space equally.
• Now the items are consuming all space in the row and are equal width.
• Make each item a (nested) flex container and add justify-content: center.
• Now each span element is a centered flex item.
• Use flex auto margins to shift the outer spans left and right.

This works because, according to the spec, auto margins take precedence over justify-content:

8.1. Aligning with auto margins

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

---

Old Answer

Use absolute positioning and an invisible spacer item.

If the left and right box would be exactly the same size, I get the desired effect. However when one of the two is from a different size the centered box is not truly centered anymore.

You are correct. If the left-aligned and right-aligned boxes are of different sizes, then justify-content: space-between (and space-around) won't keep the middle item in the center of the container.

However, the flexbox specification does allow for absolutely-positioned flex children.

So if we layout the flex items with justify-content: space-between, absolutely position one item to the center, and place an invisible "spacer" item in the middle that occupies all available width (flex-grow:1), the centered item will remain centered at all times – even when adjacent items are removed or have different widths – and the layout should work on all screen sizes.

HTML

<div id="container">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
</div>

CSS (excluding decorative styles)

#container {
    display: flex;
    justify-content: space-between;
    position: relative;  /* establish nearest positioned ancestor for abs. positioning */
    height: 80px;
}

.box {
    height: 50px;
    width: 50px;
}

.box2 { /* remove this box from normal flow and move to center */
    position: absolute;
    left: calc(50% - 25px);
}

.box3 { /* invisible flex item to minimize overlap on smaller screens */
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 250px;
    /* shorthand would be: flex: 1 1 250px; */
    visibility: hidden;
}

DEMO: http://jsfiddle.net/uqLrkc1m/

这篇关于如何保持中心框居中在弹性框布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！