如何保持“ div”固定在中心？

Question

我在flex div中有三个div。我试图弄清楚当第一个或最后一个div中的文本更改时如何防止中间div移动/更改位置。

.container {
  display: flex;
  justify-content: space-between;
}

<div class="container">
  <div clas="div1">Text1</div>
  <div class="div2">Text2</div>
  <div class="div3">Text3</div>
</div>

如果将Text3更改为其他内容，例如AnotherText3，请注意中心div（Text2）也会移动（向左移动），我希望Text2保持居中而不移动。

Text3可能很长，在这种情况下，它应该占据Text2和Text3之间的空间（同时仍将Text2保留在中间），并且在没有剩余空间时会被截断。

这里是指向我的jsfiddle的链接。

Answer 1

您可以将伸缩框的宽度设置为固定，不增大和不缩小的范围，并使用空格，溢出和文本溢出属性截断文本：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

例如：

.container {
  display: flex;
  justify-content: space-between;
}

.div1 {
  flex-grow: 0;     /* flex-grow: 0 means don't grow, 1 means grow*/
  flex-shrink: 0;   /* flex-shrink: 0 means don't shrink, 1 means shrink */
  flex-basis: 300px; /* Width of the flex box stays 300px */
}

.div2 {
  flex-grow: 0;     
  flex-shrink: 0;   
  flex-basis: 300px; 

  /* Truncate text */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.div3 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 300px;
}

Answer 2

尝试将其添加到您的代码中：

.container > div {
   width: 33%;
}

也许您必须做一些其他的CSS加法操作，以防止在有一些空白的情况下换行最后一个div，但是这样内容不会扩大div的宽度。

Answer 3

您可以像这样在.container上使用CSS Grid，以实现以下布局：

<div class="container">
    <div class="left-div">
        <div clas="div1"> Text1 </div>
    </div>
    <div class="div2 center-div"> Text2 </div>
    <div class="right-div">
        <div clas="div3"> Text4 </div>
    </div>
</div>

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
}
.left-div {
    display: flex;
    justify-content: flex-start;
 }
 .right-div {
    display: flex;
    justify-content: flex-end;
 }

 .center-div {
    display: flex;
    justify-content: center
  }

工作截图：

Answer 4

这是100％的预期。由于未指定子项的宽度，因此浏览器会检查子项的剩余空间并设置其位置。最简单的解决方案是为子元素添加宽度。像这样：

<div class="container">
  <div class="div div1">
    Text1
  </div>
  <div class="div div2">
    Text2
  </div>
  <div class="div div3">
    I am a super long text here. I am a super long text here. I am a super long text here. I am a super long text here.
  </div>
</div>

.container {
  display: flex;
}

.div {
  flex-basis: 33.3333%;
}

.div1 {}

.div2 {
  text-align: center;
}

.div3 {
  text-align: right;
}

Answer 5

我有两种去获取居中内容的方法

1. 使用相对位置：

   <div class="container">
     <div class="div2"> Text1 </div>
   </div>

    .div {
    position:relative;
    Left:50%;
}

1. 使用display flex属性：

<div class="container">
    <div clas="div1"> Text1 </div>
    <div class="div2"> Text2 </div>
    <div class="div3"> Text3 </div>
</div>

.container {
    display: flex;
}

.div1 {
text-align: center;
}