Last active
March 20, 2025 17:05
-
Star
(120)
You must be signed in to star a gist -
Fork
(6)
You must be signed in to fork a gist
-
-
Save lucprincen/9548ab19bfc34f10ef8a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
flex-flow:column-reverse wrap-reverse; | |
justify-content:center; | |
align-content:space-between; |
it took me some time. I was using align-self but I have to use align-content after analyzing finally I got it.
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
align-content: space-between;
justify-content: center;
align-items: flex-end;
flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;
Flexbox Properties Explanation
/* Setting flex-direction to column-reverse
This makes the flex container's main axis vertical, and the flex items are arranged from the bottom to the top. */
flex-direction: column-reverse;
/* Setting flex-wrap to wrap-reverse
This allows flex items to wrap onto multiple lines, but in reverse order (from bottom to top or right to left depending on flex-direction). */
flex-wrap: wrap-reverse;
/* Setting justify-content to center
This centers the flex items along the main axis (vertical in this case due to column-reverse). */
justify-content: center;
/* Setting align-content to space-between
This distributes flex lines evenly along the cross axis with space between them. */
align-content: space-between;
At first I also forgot about the wrap-reverse
but then I started rummaging at their CSS property descriptions and found out about the wrap-reverse thing.
(I read this only after solving this myself)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
sir, my solution is here,
flex-wrap: wrap-reverse;
justify-content: center;
flex-direction: column-reverse;
align-content: space-between;