Hello Fellow Codenewbies 👋

Recently I learned more about flexbox in CSS.
I will write this topic in several posts as I learn and dive into it 😊

Flexbox

Flexbox is a layout model or displaying items in a single dimension — as a row or as a column.
-- MDN Web Docs

Display Properties In CSS

Elements normally have default display: block or display: inline from browsers.

Block stacks on top of each other.
Including in this element:

div, header, footer, main, section, etc.
heading (h1 - h6)
p

While inline stays within the flow.

a
strong
em
span

We can change the behavior of these elements. One of the methods is by setting display: flex on the parent element.

.flex-container {
  display: flex
}

Result

wo flex 1.jpg

w flex 1.jpg

✏ UPDATE
The parent element is known as flex container, and the elements inside flex container are flex item.

Flex Behaviour

display: flex will automatically turn the elements inside the parent element into columns.
When the total width of the children is bigger than the width of the parent, they will stretch to fit the horizontal axis of the parent element.

I provide an example below to play with.

https://codepen.io/adiati/pen/RwRvXJP

Toggle the display: flex in the example and see how the elements inside flex-container behave and try also to play around with the width of the elements.

Conclusion

Each element have a default display property, either display: block or display: inline.
When we apply display: flex to a parent element, by default, it will turn the elements inside it into columns.

A Dip Into CSS Flexbox

Comments

Start To Think Responsive In CSS

CSS Flexbox: justify-content

More from this blog

I Was Skeptical of AI. Then It Saved Me Hours of Writing.

From Helping Out to Taking Ownership: The Art of Sticking Around

The Curated, Automated Open Source Portfolio: How It’s Going

Open Source Engagement: What's Working Now?

Beyond Hacktoberfest: Building a True Open Source Journey

Flexbox

Display Properties In CSS

Result

Flex Behaviour

Conclusion

Command Palette

Comments

Start To Think Responsive In CSS

CSS Flexbox: justify-content

More from this blog

Flexbox

Display Properties In CSS

Result

Flex Behaviour

Conclusion