向右、向左和顶部网格浮动答案

【问题标题】：Float to right, left and top grid向右、向左和顶部网格浮动
【发布时间】：2022-11-27 11:29:11
【问题描述】：

我有那个 HTML：

<div class="row">
  <div class="cell left">A</div>
  <div class="cell left">B</div>
  <div class="cell right">C</div>
  <div class="cell left">D</div>
  <div class="cell right">E</div>
  <div class="cell left">F</div>
</div>

我想获得：

Example:

所有“左侧单元格”都必须向左和顶部对齐。所有“右单元格”都必须向右和顶部对齐。

HTML 的布局必须保持原样。如何使用 FLEX 或 FLOAT 定义 CSS？每行中单元格的顺序或数量未知或不规则。

我尝试使用 FLEX 或 FLOAT 来做到这一点，但正确的单元格没有顶部对齐。

【问题讨论】：

标签： css flexbox vertical-alignment

【解决方案1】：

欢迎使用 stackoverflow bartek，查看此解决方案。
基本上，我们正在创建一个在列方向上弯曲的弹性容器，因此所有元素都在彼此下方。然后我们增加宽度，这样我们就有足够的空间让单元格在左边，单元格在右边。最后，在弹性容器中，您可以对齐元素以垂直或水平开始、居中或结束。因为我们有 2 个不同的类，有 2 种不同的对齐方式，所以我没有在父元素（行）上做一个对齐项目，而是在每个类上做了 2 个自对齐，一个在 flex-start 上，另一个在 flex-end 上。如果您有任何其他问题，请告诉我。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .row {
      display: flex;
      flex-direction: column;
      width: 200px;
    }
    .left {
      align-self: flex-start;
    }
    
    .right {
      align-self: flex-end;
    }
  </style>
</head>
<body>
<div class="row">
  <div class="cell left">A</div>
  <div class="cell left">B</div>
  <div class="cell right">C</div>
  <div class="cell left">D</div>
  <div class="cell right">E</div>
  <div class="cell left">F</div>
</div>
</body>
</html>

【讨论】：