Kevin Powell - Community•2y ago

How to align children of a flex children

In this situation https://codepen.io/Lko3001/pen/PoBNywG, can I make the children of the div at the bottom "follow the rules" of the parent with flex? I know I could just style the div at the bottom and make it flex, , then items center and all that stuff, but i was wondering if there was an easier way to do it

5 Replies

MarkBoots•2y ago

.p {
  display: contents
}

.p {
  display: contents
}

that way the childs of p will be part of it's parent

lkoOP•2y ago

but by doing so the justify-between affects even the elements in .p and ruins the layout

MarkBoots•2y ago

i thought you wanted everyting follow the rules of the parent. that's what it does. if it needs seperate rules, you have to define it seperatly

lkoOP•2y ago

Ok, thanks

MarkBoots•2y ago

you can do this. define the rules for 2 elements at once.

.parent, .p {
  /*rules that are for both*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.parent {
  /* parent specific rules*/
}
.p {
  /* p specific rules */
}

.parent, .p {
  /*rules that are for both*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.parent {
  /* parent specific rules*/
}
.p {
  /* p specific rules */
}

or you can make a separate class for it and set it to both

Gaming

Programming

How to align children of a flex children