CSS – Flexbox introduction

Flexbox provides a more efficient layout even when the size is unknown. You can convert a container to a flex container by applying some css properties. Then this flex container will layout its children.

flex container

To create a flex container you need to set the display method of a container to flex or flex-inline. flex is for block elements and flex-inline for inline elements.

not yet a flex container

Now let’s add the display:flex property to the parent container

flex-flow is a property for the flex containers and specifies how to line up elements, horizontally or vertically, and to wrap or not to wrap the row or column


DIRECTION Values : row | row-reverse | column | column-reverse

WRAP Values: wrap | wrap-reverse

flex items

Flex items are the flex container children without position:fixed and position:absolute. There is no need to specify the elements as flex items

flex-growdetermines how much extra space the flex item should get relative to its neighbors

Use the value 0 if you want to prevent the elements to grow.

flex-shrink – determines how much the element will shrink relative to its neighbors. Use the value 0 to prevent the elements to shrink.

flex-basisspecifies the width/height of an element according to flex container’s flow. It provides the starting dimension for the flex-item. row and row-reverse affects the width. column and column-reverse affects the height.

It is recommended to use flex instead flex-grow, flex-shrink and flex-basis. The syntax is:



CSS – Flexbox introduction

Read More


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s