Mastering CSS Flexbox

PermalinkTABLE OF CONTENTS

What is Flexbox 😙?

1. display.

2. flex-direction.

3. flex-wrap.

4. justify-content.

5. align-items.

6. align-content.

7. order

PermalinkWhat is Flexbox?

• Flexbox is a one-dimensional layout method for arranging items in rows or columns.

Display:-
the flex container becomes flexible by setting the display property to flex

.container{
    display: flex;
}

Output:-

Flex-direction:-
The flex-direction property is a sub-property of the Flexible Box. It establishes the main axis, thus defining the direction flex items are placed in the flex container.

PermalinkThese are property accepts flex-direction

• row: same direction (default)

• row-reverse: opposite direction

• column: same as row but top to bottom

• column-reverse: same as row-reverse top to bottom

.container{
flex-direction: column;
}

Output:-

Flex-wrap:-
The flex-wrap property is used to specify the controls whether the flex-container is single-line or multi-line.

PermalinkThese are property accept flex-direction.

• nowrap (default): all flex items will be on one line

• wrap: flex items will wrap onto multiple lines, from top to bottom.

• wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

.container {
  flex-wrap: wrap;
}

next....