Question

我有[Error] Compilation (8: 26): ORA-04076: invalid NEW or OLD specification的div。除非我指定display: flex; flex-direction: row;，否则这个div的子女占据全高。以下代码 -

align-items: center

.row {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100px;
  background: beige;
  border: 1px solid red;
  margin: 10px 0;
}

.row2 {
  align-items: center;
}

.row-item {
  border: 1px solid green;
}

.item1,
.item3 {
  width: 100px;
}

.item2 {
  flex: 1;
}

JSFiddle

我想要实现的是2.1和2.2应该采用50px（50％）的高度，并且其内容应该垂直对齐。它们还应该水平拉伸整个可用空间（如宽度：自动或100％）。然后，如果2.1不存在，2.2应该采用100px高度，并且应该垂直对齐到中间。

Answer 1

您需要将行项目设为弹性框并将align-items: center;应用于它们

这是你应该添加的代码

.row1 .row-item {
  display: flex;
  align-items: center;
}

见下面的结果：

.row {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100px;
  background: beige;
  border: 1px solid red;
  margin: 10px 0;
}

.row2 {
  align-items: center;
}

.row-item {
  border: 1px solid green;
}

.row1 .row-item {
  display: flex;
  flex-wrap: wrap;
}

.row1 .row-item div {
  width: 100%;
  border: 1px solid blue;
  display: flex;
  align-items: center;
}

.item1,
.item3 {
  width: 100px;
}

.item2 {
  flex: 1;
}

<div class="row row1">
  <div class="row-item item1">1</div>
  <div class="row-item item2">
    <div> 2.1 </div>
    <div> 2.2 </div>
  </div>
  <div class="row-item item3">3</div>
</div>

<div class="row row2">
  <div class="row-item item1">1</div>
  <div class="row-item item2">
    <div> 2.1 </div>
    <div> 2.2 </div>
  </div>
  <div class="row-item item3">3</div>
</div>

Answer 2

您可以使用protected function updateMultiple(Request $request) { foreach($request->get('members', []) as $member) { DB::table('membership')->where('id', $member['id']) ->update(array_except($member, ['id'])) } }来实现垂直对齐。在这种情况下，由于您的line-height高度为100px，因此.row1添加以下内容：CSS请参阅更新的jsfiddle，仅查看line-height: 100px;，请参阅此{ {3}}

使用flexbox对齐项目中心拉伸高度

2 个答案: