弹性问题将 2 个孩子对齐在 parent 的中间和右边

Question

我有以下 html:

<div id="box">
   <div class="test1">
     test1
   </div>
   <div class="test2">
     test2
   </div>   
</div>

现在我想将 div 与 class test1 对齐在 parent (id="box")（在主轴上）的中心，并将 test2 对齐在parent 的右边。谁能告诉我 flex 是否可行，或者我还需要其他东西吗？ html 是固定的，无法更改。我想用这个结构来解决它。

这里有一个 js fiddle 可以解决它，但我需要在 parent 中添加第三个 div：http://jsfiddle.net/kp1tzcry/54/ 这不是我想要的。我也真的很想用 flex 来解决它。我知道我可以使用 margin auto 和 float right（如果不需要的话不想这样做）

Answer 1

将 align-items: center 添加到您的 #box 将解决您的问题，但是，您当前的结构可能会导致响应屏幕出现问题。

#box {
  background: #000;
  color: #fff;
  height: 100px;
  cursor: pointer;
}

#box div {
  width: 50%;
  float: left;
  text-align: right;
}

<div id="box">
  <div class="test1">
    test
  </div>
  <div class="test2">
    test2
  </div>
</div>

编辑： 使用 width: 50% 和 float: left

Answer 2

您可以使用 display:block 和亲戚的坐姿来实现此目的

举个例子

#box {
  display: block;
  position:relative;
  background-color: lightgrey;
}

.test {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
}



.test1 {
margin:auto;

}


.test2 {
     position: absolute;
    top: 0;
bottom:0;
    right: 0;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="box">
   <div class="test test1">
     test1
   </div>
   <div class="test test2">
     test2
   </div>   
</div>

</body>

<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-self by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 13 Mar 2016 11:03:00 GMT -->
</html>

弹性问题将 2 个孩子对齐在 parent 的中间和右边

flex problem aligning 2 childs in the center and on the right of the parent

css

alignment

flexbox