水平居中弹性项目答案

【问题标题】：horizontally center flex item水平居中弹性项目
【发布时间】：2018-09-23 22:59:15
【问题描述】：

是否可以像这张图片一样在没有absolute/fixed 位置的情况下将.div2 水平居中？

div3可以改变宽度

这是我的代码：

body {
  margin:0;
}

.test {
  background:green;
  color:#fff;
  display:flex;
}

.test .div1 {
  
}

.test .div2 {
  margin:0 auto;
background:red;
}

.test .div3 {
  margin:0 0 0 auto;
}

<div class="test">
  <div class="div1">Left options</div>
  <div class="div2">Center div</div>
  <div class="div3">Username: test (string can change)</div>
</div>

【问题讨论】：

参见方框 #71，解决方案 #2：stackoverflow.com/a/33856609/3597276

标签： html css flexbox

【解决方案1】：

你可以给所有的 div 33.3333% 的宽度

.test {
  background:green;
  color:#fff;
  display:flex;
}

.test .div1 {
  width:33.3333%;
}

.test .div2 {
  margin:0 auto;
background:red;
  width:33.3333%;
}

.test .div3 {
  margin:0 0 0 auto;
    width:33.3333%;
}

<div class="test">
    <div class="div1">Left options</div>
    <div class="div2">Center div</div>
    <div class="div3">Username: test (string can change)</div>
</div>

【讨论】：

【解决方案2】：

float:left; 到.test 内的所有divs 可以解决问题。

.test>div{float:left;}

如果您希望divs 占据整个宽度，则将其宽度设为width:33.3333%;（divs 的数量/100 个）

DEMO

【讨论】：

【解决方案3】：

我假设您希望 div2 保持它的大小，并且 div1 和 div3 元素增长直到它们接触到它。为这些元素设置 0 的 flex-basis：

body {
  margin: 0;
}
.test {
  background: green;
  color: #fff;
  display: flex;
}
.test .div2 {
  background: red;
}
.test .div1,
.test .div3 {
  flex-basis: 0;
  flex-grow: 1;
}
.div3 {
  text-align: right;
}

<div class="test">
  <div class="div1">Left options</div>
  <div class="div2">Center div</div>
  <div class="div3">Username: test (string can change)</div>
</div>

【讨论】：

【解决方案4】：

给父元素显示弹性。然后justify-contents 在主轴上对齐子元素，而 `align-items' 垂直对齐子元素。
获取更多详情https://css-tricks.com/snippets/css/a-guide-to-flexbox/

<div class="test">
  <div class="div1">Left options</div>
  <div class="div2">Center div</div>
  <div class="div3">Username: test (string can change)</div>
</div>
<style>
.test{
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
}
</style>

【讨论】：

【解决方案5】：

使用display:flex 样式属性，如下所示。

body {
  margin:0;
}

.test {
  background: green;
  color:#fff;
  display:flex;
}

.test div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  background-color: green;
  height: 50px;
}

<div class="test">
  <div>Left options</div>
  <div>Center div</div>
  <div>Username: test (string can change)</div>
</div>

【讨论】：