Skip to content

Instantly share code, notes, and snippets.

@lucprincen
Last active March 20, 2025 17:05
Show Gist options
  • Save lucprincen/9548ab19bfc34f10ef8a to your computer and use it in GitHub Desktop.
Save lucprincen/9548ab19bfc34f10ef8a to your computer and use it in GitHub Desktop.
flex-flow:column-reverse wrap-reverse;
justify-content:center;
align-content:space-between;
@kt-anas
Copy link

kt-anas commented Aug 9, 2024

align-items: flex-end;
flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;

@abcdafin
Copy link

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;

@B-o0O
Copy link

B-o0O commented Nov 4, 2024

It is valid! πŸ˜…
SchermΒ­afbeelding 2023-08-02 om 15 56 50

How did you get your frogs upside down lol

πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚ LOL
πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚ LOL hhhhhh

@ivan-developer-01
Copy link

ivan-developer-01 commented Nov 8, 2024

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)

@megapangastuti
Copy link

Screenshot 2025-02-13 231541
My solution!

@kritikasisodia
Copy link

Screenshot (75)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment