Top AI Repos — open-source AI, indexed and scored
Top AI Repos tracks AI repositories on GitHub and answers two different questions about each one: is it moving right now, and would you bet a product on it.
Top AI Repos tracks AI repositories on GitHub and answers two different questions about each one: is it moving right now, and would you bet a product on it.
Learn Flexbox in 30 days with 30 code tidbits ✨
| Date | Stars |
|---|---|
| 2026-07-24 | 1614 |
| 2026-07-25 | 1614 |
| 2026-07-28 | 1614 |
| 2026-07-30 | 1614 |
| 2026-08-06 | 1614 |
Today
— stars today
This week
— stars this week
This month
— stars this month
Momentum
0.0
growth rate 0.00%/day
Read this on my new website: [samanthaming.com/flexbox30/](https://www.samanthaming.com/flexbox30/) # Flexbox30 Learn Flexbox in 30 days with 30 code tidbits ✨ <img src="flexbox30-cover.png" alt="Flexbox Cover" width="350"> ## Table of Contents 1. [Introduction](#flexbox-intro) 1. [Flex Container & Flex Items](#flex-container-and-flex-items) 1. [Immediate Child Only](#immediate-child-only) 1. [Flexbox Axes](#flexbox-axes) 1. [Flexbox Module](#flexbox-module) 1. [Parent Properties](#parent-properties) 1. [Display](#display) 1. [block vs inline](#block-vs-inline) 1. [flex-direction](#flex-direction) 1. [flex-wrap](#flex-wrap) 1. [flex-flow](#flex-flow) 1. [justify-content [row]](#justify-content-row) 1. [justify-content [column]](#justify-content-column) 1. [space-around vs space-evenly](#space-around-vs-space-evenly) 1. [align-items [row]](#align-items-row) 1. [baseline](#baseline) 1. [align-items [column]](#align-items-column) 1. [align-content](#align-content) 1. [Child Properties](#child-properties) 1. [order](#order) 1. [flex-grow](#flex-grow) 1. [flex-grow calculation](#flex-grow-calculation) 1. [flex-shrink](#flex-shrink) 1. [flex-shrink calculation](#flex-shrink-calculation) 1. [flex-basis](#flex-basis) 1. [flex-basis vs widths](#flex-basis-vs-widths) 1. [flex](#flex) 1. [align-self](#align-self) 1. [Flexbox Properties](#flexbox-properties) 1. [Flexbox Cheatsheet](#flexbox-cheatsheet) 1. [Aligning with Auto Margins](#bonus-aligning-with-auto-margins) 1. [Resources](#resources) 1. [Say Hello](#say-hello) 1. [Download & Share](#download-and-share) 1. [Contribution](#contribution) 1. [License](#license) ## Flexbox Core Concepts <a id="flexbox-intro"></a> ### [Day 1: Introduction](#flexbox-intro) Before Flexbox, we were mainly using floats for layout. And for those CSS developers, we all know the frustrations and limitations of the old way -- especially the ability to vertically center inside a parent. Ugh, that was so annoying! Not anymore! Flexbox for the win! <p><img src="code-tidbits/1-flexbox-intro.png" alt="Flexbox Introduction" width="500"></p> <a id="flex-container-and-flex-items"></a> ### [Day 2: Flex Container & Flex Items](#flex-container-and-flex-items) In order to get Flexbox to work, you need to set up the Parent-Child relationship. The parent is the flex container, and everything within it is the children or flex items. <p><img src="code-tidbits/2-flex-container-and-flex-items.png" alt="Flex Container & Flex Items" width="500"></p> <a id="immediate-child-only"></a> ### [Day 3: Immediate Child Only](#immediate-child-only) One VERY important thing I want to point out is that the flex container only wraps around its immediate children. The flex container doesn't wrap beyond one layer deep. Only the immediate children. So there is NOT a grandchildren or grand-grandchildren relationship. Only Parent ↔️ Immediate Children! Of course, you can establish a Flexbox as long as there is a parent-child relationship. So a child can also be the flex container to its children. But it will be a separate flex container. And it doesn't carry over the grandparent flex properties. This is probably one of the most important concepts that helped me understand how Flexbox works. And knowing this will help solve a lot of those "hey, why isn't this working" moments 😅 <p><img src="code-tidbits/3-immediate-child-only.png" alt="Immediate Child Only" width="500"></p> <a id="flexbox-axes"></a> ### [Day 4: Flexbox Axes](#flexbox-axes) Flexbox operates in a 2 axes system: a main and a cross axis. The main axis is your defining direction of how your flex items are placed in the flex container. Determining the cross axis is very simple, it's in the direction that's perpendicular to your main axis. Remember in math class, we were taught **x** and **y** axis. Well, throw that out. Because the main axis can be horizontal or vertical. The **x** axis is not always the main axis. This was a mistake I made, so hopefully you won
Excerpt of 33,415 characters
Read on GitHub
6
1
1
Would you bet a product on this? Bounded 0–100 and slow moving.
matched fp:4e324acd8c53206b, topic:tutorial, topic:learning, readme:course