html - 水平居中 flex 元素

Question

是否可以水平居中 .div2 而不是像这张图片那样 absolute/fixed 的位置？

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>

Answer 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>