Using Flexbox

What is Flexbox:

Flexbox is a shortened version of CSS flexible layout box, it is a powerful one-dimensional layout model, helping to lay, align, and distribute items (flex-items also known as children) efficiently inside a container(flex-container also known as the parent). Flexbox gives the ability to customize the flex items within it, depending on screensize helping with responsive layouts.

The flex model:

• Flex items are laid out along two axis:
  • The main axis is the axis running in the direction the flex items are laid out (i.e. a column or a row), the start and end of this axis are called the main start and main end.
  • The cross axis is the axis running perpendicular to the direction the flex items are laid out in, the start and end of this axis are called the cross start and cross end.

Using Flexbox

To use Flexbox you need to use Flexbox properties in your CSS stylesheet. For the very start you need to define which elements are to be laid out as flexible boxes, for this you use the display value on the elements you want to affect, so if you want a <section> to be affected you add the display: flex to the section using CSS:

section {
    display: flex;
}

Flexbox properties

Flex-direction

• This property defines the direction items are placed in the container.
• The following values can be used:
  • row: Items are placed the same as the text direction(English-left to right), this is the default value.
  • row-reverse: items are placed opposite to the text direction(English- right to left).
  • column: items are placed top to bottom.
  • column-reverse: items are placed bottom to top.

example syntax

section {
    display: flex;
    flex-direction: column-reverse;
}

Justify-content

• This property aligns items horizontally (when flex-direction is a column justify-content changes the vertical)
• The following values can be used:
  • flex-start: Items align to the left side of the container(This is the default value)
  • flex-end: Items align to the right side of the container
  • center: Items align at the center of the container
  • space-between: items display with equal spacing between them
  • space-around: items display with equal spacing around them.

example syntax

section {
    display: flex;
    justify-content: flex-end;
}

• This syntax will move your items to the right.

Align-items

• This property aligns items vertically(when flex-direction is a column align-items changes the horizontal)
• The following values can be used:
  • flex-start: items align to the top of the container
  • flex-end: items align to the bottom of the container
  • center: items align at the vertical center of the container
  • baseline: items display at the baseline of the container
  • stretch: items are stretched to fit the container(this is the default value)

example syntax

section {
    display: flex;
    align-items: flex-end;
}

Order

• This property changes the order of your items, by default items have a value of 0.
• You can use positive or negative integer values to change the order e.g. -2 , -1, 0, 1, 2 etc
• Flex items with higher specified order values will appear later in the display order than items with lower order values.
• You can set negative order values to make items appear earlier than items whose value is 0.

example syntax

section {
    display: flex;
}
.green {
order: 1;
}

Align-self

• This property can be applied to individual items also.
• It accepts the following values:
  • flex-start: aligns item at the top of the container
  • flex-end: aligns item at the bottom of the container
  • center: aligns item at the vertical center of the container
  • baseline: displays item at the baseline of the container
  • auto: item inherits the align-items property of the parent container(this is the default value)

example syntax

section {
    display: flex;
    align-items: flex-start;
}
.green {
align-self: flex-end;
}

• This example will have all your items at the top of the container except your green item which will be aligned at the bottom.

Flex-wrap

• This property determines whether your items are forced onto one line or can wrap onto multiple lines.
• The following values can be used:
  • no-wrap: every item is to fit in a single line (this is the default value)
  • wrap: items wrap around to additional lines
  • wrap-reverse: items wrap around to additional lines in reverse.

example syntax

section {
    display: flex;
    flex-wrap: wrap;
}

Flex-flow

• Flex-direction, and flex-wrap are often used together, so this shorthand property was created to combine them.
• The values accepted are the same as the two properties(flex-direction, and flex-wrap) separated by a space.

example syntax

section {
    display: flex;
    flex-flow: column wrap;
}

• This example would give you columns that the items are wrapped on.

Align-content

• This property is used to set the spacing between lines. When there is only one line align-content has no effect.
• The following values are accepted:
  • flex-start: lines are packed at the top of the container
  • flex-end: lines are packed at the bottom of the container
  • center: lines are packed at the vertical center of the container
  • space-between: lines display with equal spacing between them
  • space-around: lines display with equal spacing around them
  • stretch: lines are stretched to fit the container(this is the default value).

example syntax

section {
    display: flex;
    flex-wrap: wrap;
    align-content: flex- start;
}

• This example will have all your lines at the top of your container.

Final note

• I have talked about the properties for:

• flex-direction

• justify-content

• align-items

• order

• align-self

• flex-wrap

• flex-flow

• align-content

• All of these properties can be used together to create whatever layout for your items you want using flex-box.

• This article was inspired by playing Flexbox Froggy check it out at : flexbox froggy

Thanks for reading!