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
MarkBoots2y ago
.p {
display: contents
}
.p {
display: contents
}
that way the childs of p will be part of it's parent
lko
lko2y ago
but by doing so the justify-between affects even the elements in .p and ruins the layout
MarkBoots
MarkBoots2y 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
lko2y ago
Ok, thanks
MarkBoots
MarkBoots2y 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
Want results from more Discord servers?
Add your server