将元素与弯曲方向对齐？

Question

是否可以将单个元素与弹性容器的方向对齐？例如;我有一个容器，其中所有元素都应右对齐，但第一个元素应左对齐。

是否可以使用'flex'而不是float？在以下示例中；如何才能使第一个元素（红色div）顶部对齐，而使第一个元素（绿色div）左侧对齐？

  .h-left {
    align-self: flex-start;
  }
  .h-center {
    align-self: center;
  }
  .h-right {
    align-self: flex-end;
  }
  .v-top {
    justify-self: flex-start;
  }
  .v-center {
    justify-self: center;
  }
  .v-bottom {
    justify-self: flex-end;
  }

  .container {
    display: flex;
    flex-direction: column;
  }
  .container.h-left {
    align-items: flex-start;
  }
  .container.h-center {
    align-items: center;
  }
  .container.h-right {
    align-items: flex-end;
  }
  .container.v-top {
    justify-content: flex-start;
  }
  .container.v-center {
    justify-content: center;
  }
  .container.v-bottom {
    justify-content: flex-end;
  }


  .h-container {
    flex-direction: row;
  }
  .h-container.h-left {
    justify-content: flex-start;
  }
  .h-container.h-center {
    justify-content: center;
  }
  .h-container.h-right {
    justify-content: flex-end;
  }
  .h-container.v-top {
    align-items: flex-start;
  }
  .h-container.v-center {
    align-items: center;
  }
  .h-container.v-bottom {
    align-items: flex-end;
  }


  .container > * {
    max-width: 150px;
  }

   <h4>The first element should be top aligned</h4>
   <div class="container h-right v-bottom" style="background-color: red; height: 300px;">
     <p class="h-top">This should be top aligned</p>
     <p>This should be bottom aligned</p>
     <p>This should be bottom aligned</p>
   </div>

   <h4>The first element should be left aligned</h4>
   <div class="container h-container h-right v-bottom" style="background-color: green; height: 150px;">
     <p class="h-left">This should be left aligned</p>
     <p>This should be right aligned</p>
     <p>This should be right aligned</p>
   </div>

Answer 1

是：使用margin-xxx: auto，其中xxx代表左/右/下/上，无论您希望在哪里。我将其应用于您的示例-见下文：

.h-left {
    align-self: flex-start;
  }
  .h-center {
    align-self: center;
  }
  .h-right {
    align-self: flex-end;
  }
  .v-top {
    justify-self: flex-start;
  }
  .v-center {
    justify-self: center;
  }
  .v-bottom {
    justify-self: flex-end;
  }

  .container {
    display: flex;
    flex-direction: column;
  }
  .container.h-left {
    align-items: flex-start;
  }
  .container.h-center {
    align-items: center;
  }
  .container.h-right {
    align-items: flex-end;
  }
  .container.v-top {
    justify-content: flex-start;
  }
  .container.v-center {
    justify-content: center;
  }
  .container.v-bottom {
    justify-content: flex-end;
  }


  .h-container {
    flex-direction: row;
  }
  .h-container.h-left {
    justify-content: flex-start;
  }
  .h-container.h-center {
    justify-content: center;
  }
  .h-container.h-right {
    justify-content: flex-end;
  }
  .h-container.v-top {
    align-items: flex-start;
  }
  .h-container.v-center {
    align-items: center;
  }
  .h-container.v-bottom {
    align-items: flex-end;
  }


  .container > * {
    max-width: 150px;
  }
  .h-top {
    margin-bottom: auto;
  }
  .h-left {
    margin-right: auto;
  }

<h4>The first element should be top aligned</h4>
   <div class="container h-right v-bottom" style="background-color: red; height: 300px;">
     <p class="h-top">This should be top aligned</p>
     <p>This should be bottom aligned</p>
     <p>This should be bottom aligned</p>
   </div>

   <h4>The first element should be left aligned</h4>
   <div class="container h-container h-right v-bottom" style="background-color: green; height: 150px;">
     <p class="h-left">This should be left aligned</p>
     <p>This should be right aligned</p>
     <p>This should be right aligned</p>
   </div>