KPC
Kevin Powell - Community•3y ago
lko

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
MarkBoots•3y ago
.p {
  display: contents
}
.p {
  display: contents
}
that way the childs of p will be part of it's parent
lko
lkoOP•3y ago
but by doing so the justify-between affects even the elements in .p and ruins the layout
MarkBoots
MarkBoots•3y 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
lko
lkoOP•3y ago
Ok, thanks
MarkBoots
MarkBoots•3y 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

Did you find this page helpful?