水平中心弹性项目

Question

是否可以像这张图片一样水平居中.div2而没有位置absolute/fixed？

div3可以改变宽度

这是我的代码：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

给父元素显示flex。然后SparkR在主轴上对齐孩子，并且`align-items'将孩子垂直对齐。
获取更多详细信息https://css-tricks.com/snippets/css/a-guide-to-flexbox/

justify-contents

Answer 2

你可以给所有divs 33.3333％宽度

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

对float:left;内的所有div进行{p> .test即可。

.test>div{float:left;}

如果您希望div占据整个宽度，请将其宽度设为width:33.3333%;（divs / 100号）

DEMO

Answer 5

我觉得你希望div2保持它的大小，div1和div3元素会增长直到它们触摸它。为这些元素设置0的基于弹性的基础

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;