DEV Community

Cover image for CSS3 flexbox in simple way for beginners to master.
menomanabdulla
menomanabdulla

Posted on

CSS3 flexbox in simple way for beginners to master.

Today’s world you can’t survive without flex-box as a frontend developer whether you are expert or beginner. Flex-box give you extra superiority for managing your content in final layout, also flex-box has huge market demand for building complex web-layouts.

CSS flexbox will added new weapon in your visual development portfolio. Here I am explained all CSS3 flex-box property in simple way with visual example and copy ready code. So stick till to the end and give your CSS expertise next shape.

Here is live examples, you can check it from here.
Here is github, you can see source-code from here.

1.Display:

Display is CSS box-model properties, it’s primary properties for next all flex related properties. This defines a flex container, inline or block depending on the giver value. It enables a flex content for all its direct children.

Display is CSS box-model properties

2.Flex Order

Flex item maintain default order as a source order. Order properties can controls order in which they appear in the flex-container.

Flex item maintain default order

3.Flex Direction

Flex-direction defines how flex-box items are ordered within a flex-box container. Value example and use case:
row: Same as text direction
row-reverse: Alternative to text direction
column: Same as row but top to bottom
column-reverse: Same as row-reverse but top to bottom

Flex-direction defines how flex-box items are ordered

4.Flex Wrap

For Flex-wrap stick by-default inline, flex-wrap is also flexible like others property. You can change that and allow the items to wrap as needed with its property. Value example and use case:
nowrap: all flexf items will be on one line
wrap: flex items will wrap onto multiple lines, fro
wrap-reverse: flex items will wrap into multiple lines, from bottom to top

For Flex-wrap stick by-default inline

5.Flex Shrink

Flex-shrink is just opposite of flex grow. It only comes into play if the elements must shrink to fit into their container(when the container is just too small).
By-default every item has flex-shrink of 1 which means it will shrink as the box contracts.

Flex-shrink is just opposite of flex grow

6.Flex Flow

CSS This is short-hand for the flex-direction and flex-wrap properties, simultaneously they define flex containers main and cross axis. The default value is row and nowrap.

CSS This is short-hand for the flex-direction and flex-wrap properties

7.Flex Basis

This defines the default size of an element before the remaining space is distributed. It could be a length with unit or keyword like auto, content flex-basis default value is “auto”.

This defines the default size of an element before the remaining space is distributed

8.Justify Content

This properties define alignment of flex item along with ‘x’ axis or main axis. Justify-content’s default value is “flex-start”.

flex-start: item will appear at the starting of the flex-container along with ‘x’ axis.
flex-end: item will appear at the end of the flex-container along with ‘x’ axis.
space-between: items get space between those mainly left and right side when they appear along with ‘x’ axis.
space-around: items get space combinedly mainly left and right side along with ‘x’ axis.
center: items will align center along with ‘x’ axis.

This properties define alignment of flex item along with ‘x’ axis or main axis.

9.Flex

Flex properties determine short-hand of flex-grow, flex-shrink and flex-basis combined. The second and third property are optional. The default is ‘0 1 auto’ but if you set it with a single number value it’s like ‘1 0’;

Flex properties determine short-hand of flex-grow

10.Align Items

Align-items properties defines the default behavior for how flex items are aligned or laid out along with ‘y’ or cross axis.
flex-start: item will appear at the starting of the flex-container along with ‘y’ axis.
flex-end: item will appear at the end of the flex-container along with ‘y’ axis.
center: item will appear at the center point of the flex-container along with ‘y’ axis.

Align-items properties defines the default behavior for how flex items are aligned or laid out along with ‘y’ or cross axis.

11.Align Self

For This allows the default alignment, to be overridden for individual flex items. We can overridden align-items properties only for any individuals.

For This allows the default alignment, to be overridden for individual flex items.

12.Align Content

This property define flex container’s lines within when there is extra space in the ‘y’ axis, similar to how justify-content aligns individuals items within the man the main-axis.

This property define flex container’s lines within when there is extra space in the ‘y’ axis

On this article I tried to cover all CSS3 flex-box properties with example and also include live example with github source code.

I hope you enjoyed it, please let me know your words. If you want to deep drive with CSS3 coding guidelines and front-end web development best practices please check it. Also you can check my 15 Best practices of HTML5 for beginners for give your markup good shape from here. If you find any errors or mistakes then do let me know. Thanks for this journey & Happy Coding.

Discussion (8)

Collapse
joelbonetr profile image
JoelBonetR • Edited on

Here's a full grid system using Flex, plus -opinionated- components I wrote some time ago for a given project:

codepen.io/joelbonetr/pen/PoqzMWL

This is the initial version, it was refactored, extended and so on on a private repo, but I guess it's also a good chunk of styles to check, fork and play with :D

Collapse
menomanabdulla profile image
menomanabdulla Author

WoW! there lots of cool stuff. Thanks.

Collapse
tamalnh profile image
Tamal H

Awesome, very informative

Collapse
menomanabdulla profile image
menomanabdulla Author

Your words are always inspirational. Thanks a lot bahi.

Collapse
thisisfoysal profile image
Foysal Imran

Woow. Seems one of the best article about flex box. Explaination was easier to understand. Thanks for sharing.

Collapse
menomanabdulla profile image
menomanabdulla Author

You found it handy and really appreciate that. Thanks a bunch man, keep hacking.

Collapse
akshayrak profile image
Akshay R

Its really good list for quick look up, you can also learn flexbox by playing games check out dev.to/akshayrak/learn-css-by-play...

Collapse
menomanabdulla profile image
menomanabdulla Author

Thanks a bunch. You also listed-up some cool games BTW I love the Flexbox Froggy one , it's super fun.