使用 Flexbox 在中心对齐一个项目，在右侧对齐其他项目 [英] Align an item in center and other in right with Flexbox

问题描述

我想像下面的示例一样使用 flexbox 将一个项目居中对齐，其他项目在右侧对齐.

+-------------------------+|||||||+----+ +----+|||||||+-------------------------+

这是我在 plunker 上的代码(已更新解决方案):

http://plnkr.co/edit/kYYIOIFQaEMHgvZCKMkf?p=preview

解决方案

基本上，你不能真正用 flexbox 使用基本对齐选项来做到这一点(至少据我所知).

你可以做的是添加一个伪元素来伪造一个额外的盒子来为你做这项工作.当然，盒子的尺寸必须和你想要移动的物品尺寸相同，然后你可以使用space-between.

.wrap {宽度:80%；显示:弹性；对齐内容:间隔；边框:1px 纯红色；保证金:自动；}.wrap:after {/* 居中线仅用于演示目的 */内容: '';位置:绝对；左:50%；高度:100%；宽度:0；右边框:1px 纯绿色；}.盒子 {弹性:0 0 100px；高度:100px；背景:#000；}.wrap:before, .box:last-child {内容: '';弹性:0 0 50px；高度:100px；}

<div class="box"></div><div class="box wide"></div>

I want to align an item in center and other in right using flexbox like the example bellow.

+-------------------------+
|         |    |    |    ||
|         +----+    +----+|
|                         |
|                         |
|                         |
+-------------------------+

Here is my code on plunker (Updated with solution):

http://plnkr.co/edit/kYYIOIFQaEMHgvZCKMkf?p=preview

解决方案

Basically, you can't really do that with flexbox using the basic alignment options (at least as far as I can tell).

What you can do is add a pseduo-element to fake an extra box to do the work for you. Of course, the box has to have the same dimensions as the item you want to shift over, then you can use space-between.

.wrap {
  width: 80%;
  display: flex;
  justify-content: space-between;
  border:1px solid red;
  margin: auto;
}


.wrap:after { /* centered line for demo purposes only */
  content: '';
  position: absolute;
  left: 50%;
  height: 100%;
  width: 0;
  border-right:1px solid green;
}

.box {
  flex:0 0 100px;
  height: 100px;
  background: #000;
}

.wrap:before, .box:last-child {
  content: '';
  flex:0 0 50px;
  height: 100px;
}

<div class="wrap">
<div class="box"></div>
<div class="box wide"></div>
</div>

这篇关于使用 Flexbox 在中心对齐一个项目，在右侧对齐其他项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！