Menu
I was wondering if there is a way to override alignment along main axis for individual element. Something like this:
In the picture above, all the elements have align-items: flex-start, except of the last one, which needs to be aligned as flex-end, or space-around.
There is an option to override along cross axis: align-self, but probably not along main axis.
What is bad with doing this with position: absolute: the other elements should respect that special one, and not overlap with it.
What is bad with float is that it works for flex-direction: row only.
628
The axes and flex-direction If you are working with flex-direction set to row , this alignment will be in the inline direction. However, in Flexbox you can change the main axis by setting flex-direction to column . In this case, justify-content will align items in the block direction.
To center our box we use the align-items property to align our item on the cross axis, which in this case is the block axis running vertically. We use justify-content to align the item on the main axis, which in this case is the inline axis running horizontally.
You can also align a flex item to the right by setting the CSS margin-right property. In our example below, we set the "auto" value of this property on the "align2" class.
Simply set margin-left to "auto" for the 4th element. When aligning items along the main axis, auto margins are the way to go.
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
