Html Question posted in
Some basic documentation can be found here.

Html – align the last flex items at the right bottom of next line

This is what I am trying to achieve where the last two items would be align at the bottom right side of the flex.
This is my cdoe structure:

<div class="container">
<div class="list-items">
  <div class="item">
   Item One
  </div>
    <div class="item">
   Item Two
  </div>
      <div class="item">
   Item three
  </div>
</div >
<div class="list-items">
  <div class="item">
   Item Four
  </div>
    <div class="item">
   Item Five
  </div>
      <div class="item">
   Item Six
  </div>
</div >
<div class="list-items">
  <div class="item">
   Item seven
  </div>
    <div class="item">
   Item Eight
  </div>
</div>
</div>

The last two items would be in the second div of flex, whereas in the first div will have multiple items that will be displayed as specific row.
Any ideas how can I achieve it.
Here is the Fiddle link, I am Playing around.
enter image description here

Tags:

2

Answers


  1. 0

    If you must have 3 separate flex groups then the last flex-items div could have justify-content: flex-end on it.

    <div class="list-items" style="justify-content: flex-end">...</div>
    Login or Signup to reply.
  2. 0

    It looks like a table, so maybe you should use <table>?
    If for some reason you do not want to do this, then judging by the screenshot, you need to apply grid + grid-template-columns:subgrid, because flexbox will not help here:

    .container {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
}

.list-items {
  grid-column: span 3;
  display: grid;
  grid-template-columns: subgrid;
}

.item {
   border:1px solid;
   padding: 2px 8px;
}
    <div class="container">
  <div class="list-items">
    <div class="item">Item One</div>
    <div class="item">Item Two</div>
    <div class="item">Item three</div>
  </div>
  <div class="list-items">
    <div class="item">Item Four</div>
    <div class="item">Item Five</div>
    <div class="item">Item Six</div>
  </div>
  <div class="list-items">
    <div></div>
    <div class="item">Item seven</div>
    <div class="item">Item Eight</div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search