CODEWITHSUNDEEP
cssflexbox
hubvill
hubvill

Reputation: 255

Flex Box - 3 column - align top

I am having difficulty top aligning my 3 columns with multiple "rows". If I use the CSS property align-items: flex-end; I get the correct results, but elements are aligned at the bottom. If I try align-items: flex-start; nothing happens.

In the fiddle I would like the red block to move up so it is right bellow the Purple Heading.

enter image description here

Please see fiddle

Any help would be great!

Upvotes: 0

Views: 624

Answers (2)

Andrii Kovalchuk
Andrii Kovalchuk

Reputation: 1047

I think you need to change html structure a little bit, if you want to make your task. I propose two versions to solve this issue. You can see it on the Fiddle.

Fiddle 1 - https://jsfiddle.net/AndrewKovalchuk/c6o4gdmh/ 

.categories {
  display: flex;
  flex-wrap: wrap;
}

.categories > ul {
  margin: 0;
  width: 33.33%;
  box-sizing: border-box;
}

.red {
  background-color: red;
}
.purple {
  background-color: purple;
}

Fiddle 2 - https://jsfiddle.net/AndrewKovalchuk/q6jt2d8h/

.categories {
  display: flex;
  flex-wrap: wrap;
}

.categories .category {
  width: 33.33%;
  display: flex;
  flex-direction: column;
}

.category > ul {  
  margin: 0;
  box-sizing: border-box;
}

.red {
  background-color: red;
}
.purple {
  background-color: purple;
}

Upvotes: 1

Aditya Bhave
Aditya Bhave

Reputation: 1028

set flex-direction: column and give it a fixed height.

height: 400px;
flex-direction: column;

Fiddle - https://jsfiddle.net/0eqLf321/40/

Upvotes: 0

Related Questions