CODEWITHSUNDEEP
cssflexbox
Ozge Cokyasar
Ozge Cokyasar

Reputation: 313

Flexbox grid: How to display 3 items side-by-side but varying vertical positions

The red boxes are the items, the grey background is the container:

IMAGE

I have 3 items that I want to display in a container. Please see the included image. What is the best way to go about this using flexbox? It should be the same on mobile view. Thanks

Upvotes: 0

Views: 135

Answers (2)

Christopher Bennett
Christopher Bennett

Reputation: 801

Use flexbox, with nth-child to change the specific heights of the flex objects.

EX:

//HTML
<div class="container">
    <div class="flex"></div>
    <div class="flex"></div>
    <div class="flex"></div>
</div>

//CSS
.container{
  background: #AAA;
  border: 1px solid black;
  display: flex;
  height: 15vw;
  width: 20vw;
  }
.flex{
  background: #F00;
  height: 7vw;
  margin-left: 1.25vw;
  width: 5vw;
  }
.flex:nth-child(1){
  margin-top: 6vw;
  }
.flex:nth-child(2){
  margin-top: 1vw;
  }
.flex:nth-child(3){
  margin-top: 5vw;
  }

See an example here: https://jsfiddle.net/mn8ukbae/7/

Upvotes: 1

Andu Andrici
Andu Andrici

Reputation: 853

with flex you have the align-self property, which can be used to align an element on the cross-axis differently from the others, within the same flex parent.

.container { display: flex; }
.item--1 { align-self: flex-end; }
.item--2 { align-self: flex-start; }
.item--3 { align-self: center; }

I could almost bet my life that this is a 'homework' exercise, and you would do well to read up on flex and align-self to make the most of it.

Upvotes: 0

Related Questions