Align an element against the flex direction?

Question

Is it possible to align a single element against the flex container direction? For example; I have a container where all elements should be right-aligned except for the first element that should be left-aligned.

Is it possible to achieve using 'flex' as opposed to float? In the below examples; how can I top align the first element (in the red div) and left align the first element (in the green 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>

score 0 · Answer 1 · answered Sep 07 '20 at 01:02

Yes: Use margin-xxx: auto, where xxx stands for left/right/bottom/top, wherever you want the gap to be. i applied it to your example - see below:

.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>

Align an element against the flex direction?

1 Answers1