Question

如何使用下面的flexbox将error: expected ';' before '...' token error: parameter packs not expanded with '...'与右端对齐？

div.c

即使+--------------+ |A B C | +--------------+

，规则align-self: flex-end;似乎也会将框与底部对齐

flex-direction: row;

CSS：

+--------------+
 |A B           |
 |    C         |
 +--------------+

HTML：

.container {
  border: 2px solid;
  height: 500px;
  display: flex;
  flex-direction: row; 
}
.box {
  border: 1px solid;
  height: 200px;
  width: 50px;
}
.a {
  background-color: red;
  align-self: flex-start;
}
.b {
  background-color: cyan;
  align-self: flex-start
}
.c {
 background-color: green;
 align-self: flex-end;
}

请看这里的小提琴： https://jsfiddle.net/rootnode/m5hyxLhb/7/

Answer 1

@if(Session::has('message')) <h2 style="color: green"><i class="fa fa-star"></i>{{Session::get('message')}}</h2> @endif只进入＆＃34;列＆＃34;，在您的情况下，您有两个选择：

1）align-self: flex-end; justify-content: space-between;，fiddle

2）删除两个元素上的.container并使用align-self上的margin-left: auto;，fiddle

1）

.b

2）

.container {
      border: 2px solid;
      height: 500px;
      display: flex;
      flex-direction: row; 
      justify-content: space-between;
    }
    .box {
      border: 1px solid;
      height: 200px;
      width: 50px;
    }
    .a {
      background-color: red;
    }
    .b {
      background-color: cyan;
    }

编辑
既然您已将问题编辑为3个框，则可以查看此fiddle，

.container {
  border: 2px solid;
  height: 500px;
  display: flex;
  flex-direction: row; 
}
.box {
  border: 1px solid;
  height: 200px;
  width: 50px;
}
.a {
  background-color: red;
}
.b {
  background-color: cyan;
  margin-left: auto;
}

Answer 2

更新回答

根据新问题，将margin-left: auto;添加到该项目后，将单个项目右对齐。

Demo

原始回答 使用容器上的justify-content属性。

.container {
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

灵活属性here的良好资源。

Fiddle

＆＃13;

.container {
  border: 2px solid;
  height: 500px;
  display: flex;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.box {
  border: 1px solid;
  height: 200px;
  width: 50px;
}
.a {
  background-color: red;
  align-self: flex-start;
}
.b {
  background-color: cyan;
  align-self: flex-end;
}

＆＃13;

<div class="container">
  <div class="box a">
  </div>
  <div class="box b">
  </div>
</div>

＆＃13;

Answer 3

如果您具有flex-direction：'row'，并且想在最后水平制作一个项目，只需使用margin-left:'auto' ，它就会相应地工作。

Flexbox - align-self：水平弯曲端

3 个答案: