If you need to organize items in a single row, on a single column, you might prefer using Flexbox over Grid.
Flexbox is one of the two modern layouts systems, along with CSS Grid.
Flexbox is a one-dimensional layout model.
It will control the layout based on a row or on a column, but not rows/columns together at the same time as Grid does.
The main goal of flexbox is to allow items to fill all the space made available by their container, depending on some rules you set.
A flexbox layout is applied to a container by setting the property display to flex:
.container {
display: flex;
}
Once you add this to an element, the content inside the element will be aligned using flexbox.
Once you do so, you can use other flexbox properties to set the layout.
Some of those properties apply to the container.
Some other properties apply to each individual item inside the container.
| Apply to container | Apply to items inside the container |
|---|---|
| flex-direction | order |
| justify-content | align-self |
| align-items | flex-grow |
| align-content | flex-shrink |
| flex-wrap | flex-basis |
| flex-flow | flex |
Lessons in this unit:
Are you intimidated by Git? Can’t figure out
merge vs rebase? Are you afraid of screwing up
something any time you have to do something in
Git? Do you rely on ChatGPT or random people’s
answer on StackOverflow to fix your problems?
Your coworkers are tired of explaining Git to
you all the time? Git is something we all need
to use, but few of us really master it. I
created this course to improve your Git (and
GitHub) knowledge at a radical level. Launching
May 21, 2024. Join the waiting list!