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.

flex container and flex items, <span>CSS – Flexbox introduction</span>, KandZ
flex container and flex items, <span>CSS – Flexbox introduction</span>, KandZ
not yet a flex container
flex container and flex items, <span>CSS – Flexbox introduction</span>, KandZ

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

flex container and flex items, <span>CSS – Flexbox introduction</span>, KandZ
flex container and flex items, <span>CSS – Flexbox introduction</span>, KandZ

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

syntax:
flex-flow: DIRECTION WRAP

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

WRAP Values: wrap | wrap-reverse

flex container and flex items, <span>CSS – Flexbox introduction</span>, KandZ
flex container and flex items, <span>CSS – Flexbox introduction</span>, KandZ

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

flex container and flex items, <span>CSS – Flexbox introduction</span>, KandZ
flex container and flex items, <span>CSS – Flexbox introduction</span>, KandZ

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:

flex: FLEX-GROW FLEX-SHRINK FLEX-BASIS

THE END!!!

94470cookie-checkCSS – Flexbox introductionCSS – Flexbox introduction

Related posts

One Thought to “CSS – Flexbox introduction

Comments are closed.