CodeNewbie Community ๐ŸŒฑ

Cover image for A Dip Into CSS Flexbox
Ayu Adiati
Ayu Adiati

Posted on • Originally published at adiati.com

A Dip Into CSS Flexbox

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
}
Enter fullscreen mode Exit fullscreen mode

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.

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.

Top comments (4)

Collapse
 
arvindsridharan profile image
arvindsridharan

I have bookmarked your post for later reading. Looks interesting. How about CSS grid.

Collapse
 
adiatiayu profile image
Ayu Adiati Author

Thank you! ๐Ÿ˜Š
I write based on what I've learned so far.
So CSS grid will be there as soon as I learn it ๐Ÿ˜„

Collapse
 
arvindsridharan profile image
arvindsridharan

That's good. When you share what you have learnt the concepts are here to stay.

Thread Thread
 
adiatiayu profile image
Ayu Adiati Author

So true! ๐Ÿ˜ƒ