Question

我尝试水平居中对齐group1并右对齐group2与flex。

<div class="holder">
    <div class="group1">
        ...
    </div>
    <div class="group2">
        ...
    </div>
</div>

CSS：

.holder{
    display: flex;
    justify-content:center;
}
.group2{
    align-self: flex-end;
}

但是一切都只是集中，是什么修复？

Answer 1

由于flexbox是基于边距操作而建立的，除了使用position:absolute之外，没有办法将一个项目移出流程。

任何其他方法都会使中心项目受到其他元素的影响。

＆＃13;

.holder {
  display: flex;
  justify-content: center;
  border: 1px solid grey;
  position: relative;
}
.group1 {
  background: plum;
}
.group2 {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid red;
}

＆＃13;

<div class="holder">
  <div class="group1">
    Group 1
  </div>
  <div class="group2">
    Group 2
  </div>
</div>

＆＃13;

Answer 2

想象一下，您有一个带有文本和图标的按钮，并且您希望文本位于中心而图标位于右侧。不要忘记给按钮一个宽度。

使用 flexbox 非常简单。

button {
 display: flex;
 justify-content: center;
 align-items: center;
 flex: 1;
 width: 400px;
 order: 1;
}

span {
 flex: 1;
}

<button>
 <span>
  Click me  
 </span>
 <i>></i>
</button>

Answer 3

我们可以使用flex、grid和position来实现。

查看flex, grid的解决方案，因为位置已经在上面提交了??

灵活解决方案：

page_links('post?','&id='.$_GET['id']);

.holder {
  display: flex;
}
.group1 {
  flex: 1;
  text-align: center;
}

网格解决方案：

<div class="holder">
  <div class="group1">...</div>
  <div class="group2">.....</div>
</div>

.holder {
  display: grid;
  grid-template-columns: 1fr 0fr;
}
.group1 {
  flex: 1;
  text-align: center;
  border: 1px solid green;
}
.group2 {
  border: 1px solid pink;
}

Answer 4

这是您使用 Flexbox

所能做的最好的事情

＆＃13;

.holder{
  display: flex;
  justify-content: center;
}

.group1 {
  flex: 1;
  text-align: center;
}

.group2{
  margin-left: auto;
}

＆＃13;

<div class="holder">
    <div class="group1">
       Center
    </div>
    <div class="group2">
        Right
    </div>
</div>

＆＃13;

更好的选择是在 Flexbox

中使用相对/绝对位置

＆＃13;

.holder{
  display: flex;
  justify-content: center;
  color: white;
  position: relative;
}

.group1 {
  flex: 1;
  text-align: center;
  background: black;
}

.group2{
  position: absolute;
  top: 0;
  right: 0;
}

＆＃13;

<div class="holder">
    <div class="group1">
       Center
    </div>
    <div class="group2">
        Right
    </div>
</div>

＆＃13;

Answer 5

您可以在.holder以及align-self和text-align的游戏中设置高度：

<强> CSS

.holder{
    display: flex;
    justify-content:center;
    align-content: center;
    height: 200px;
    background: #ccc;
}
.group2{
    align-self: center;
    text-align: right;
    width: 50%;
}

.group1{
    align-self: center;
    width: 50%;
    text-align: center;
}

<强> DEMO HERE

将中心与右侧对齐？

5 个答案: