CODEWITHSUNDEEP
css
Jules
Jules

Reputation: 275

Stacking divs from the bottom right

I am adding colour blocks (divs with bg colours) to a parent div. Each parent div can have a number of these colour blocks which are to display in the bottom right of the parent, with a maximum of three to a row.

My code (below) does what is required for 3 or less colours, but if a forth colour is added it jumps to the line below leaving two empty spaces on the bottom line. What I would like to happen is for the forth colour to be displayed on the line above so the bottom line has no blanks.

You can see the problem in action here along with a hardcoded example of what I would like to happen.

<style>
.container {
    position: relative;
    width: 200px;
    height: 142px;
}

.colorSwatches {
   position: absolute;
   bottom: 0px;
   right: 0px;
   max-width: 100px;
   max-height:60px;
   text-align:right
}

.swatch {
    display: inline-block;
    width: 25px;
    margin: 2px;
    height: 25px;
    background-color: rgb(255, 0, 0);  ///or whatever
}
</style>


<div class="container">
  <div class="colorSwatches">
     <div class="swatch"></div>
     <div class="swatch"></div>
     <div class="swatch"></div>
     <div class="swatch"></div>
  </div>
</div>

Thanks for any help.

Upvotes: 2

Views: 125

Answers (1)

RGLSV
RGLSV

Reputation: 2058

I think you can pull off that layout with some flexbox magic:

  • set your .swatches container, in your case .colorSwatches, with display: flex prop
  • then to this container and a flex-wrap rule of: flex-wrap: wrap-reverse, so that the children inside it will wrap, on to the next line, in opposite direction of the flex-direction, which by default is row I think.
  • and lastly, add to the container, the justify-content: flex-end; so that the items inside will start laying out at the end of their container.

Here's a jsfiddle demo and a couple of resources:

Upvotes: 1

Related Questions