Introduction To CSS FlexBox

What is FlexBox

• FlexBox is a layout model in CSS that provides an easy and clean way to arrange items within a container in one - dimension.

• Flexbox can be useful for creating small-scales layouts and it is responsive and mobile-friendly.

• It gives a lot of flexibility such as arranging sequence of items, spacing between lines and items, positioning the items, arranging the items.

Components of FlexBox

• There are 2 main components of FlexBox : Flex Container and Flex Items.

Flex Container

It is the Parent 'div' which contains the items.

Flex Items

These are the child items of Flex Container.

FlexBox Container Properties

• The area of a document laid out using flexbox is called a flex container.
• To create a flex container, we set the value of the area's container's display property to flex or inline-flex.

  display : flex;

• When we do this the direct children of that container become flex items.
• Various properties of FlexBox container :-

Flex Direction

• The flex-direction property defines in which direction the container wants to stack the flex items.

  flex:direction: row | row-reverse | column | column-reverse;

  row

• The row value stacks the flex items horizontally (from left to right):
  https://codepen.io/madhavsahi/pen/ZERvwPe

  row-reverse

• The row-reverse value stacks the flex items horizontally (but from right to left):
  https://codepen.io/madhavsahi/pen/KKeZEXq

  column

• The column value stacks the flex items vertically (from top to bottom):
  https://codepen.io/madhavsahi/pen/yLEpwaX

  column-reverse

• The column-reverse value stacks the flex items vertically (but from bottom to top):
  https://codepen.io/madhavsahi/pen/rNKpRzd

Flex Wrap

• The flex-wrap property specifies whether the flex items should wrap or not.

  flex-wrap: wrap | nowrap | wrap-reverse;

  wrap

• The wrap value specifies that the flex items will wrap if necessary.

  nowrap

• The nowrap value specifies that the flex items will not wrap (this is default).

  wrap-reverse

• The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order.

  Code example:

  https://codepen.io/madhavsahi/pen/JjZMVog

Justify-Content

• The justify-content property is used to align the flex items horizontally.

• Justify-content works as whole the flex-items are moved horizontally.

  justify-content : flex-start | flex-end | center| space-around| space-between;

  flex-start

• The flex-start value aligns the flex items at the beginning of the container (this is default).

  flex-end

• The flex-end value aligns the flex items at the end of the container.

  center

• The center value aligns the flex items at the center of the container.

  space-around

• The space-around value displays the flex items with space before, between, and after the lines.

  space-between

• The space-between value displays the flex items with space between the lines.

  Code-Example

  https://codepen.io/madhavsahi/pen/jOKYRZe

Align-Items

• The align-items property is used to align the flex items vertically.

  align-items: flex-start | flex-end| center| stretch (default);

  Code Example

  https://codepen.io/madhavsahi/pen/MWXrdwW?editors=1100

Align-Content

• The align-content property is used to align the flex lines.
• It is used to manage the spacing between the flex lines.

• We have to use "flex-wrap:wrap;" also.

  Code Example

  https://codepen.io/madhavsahi/pen/abKErYw

Flex Items Properties

• The items inside the Flex Container are called Flex items.
• We can have more control over flex items. We can target them directly.
• Various properties of Flex Items are :

Order

• With the order property we can reorder the appearance of specific flex items.
• The number we specify defines the priority of the item in the ordering.
• For eg. : An item that has order: 2 will appear before another one that has order: 1. If both items have the same order priority, they appear in their natural DOM order of HTML.
• All items have an order property set to 0 by default.
• Code example :-
  https://codepen.io/madhavsahi/pen/NWzXQKa

Flex-Grow

• The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.
• Default value is 0.
• Number should be provided.

Flex-Shrink

• The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex item.
• Default value is 1.
• Number should be provided.

FlexBox Game

• To practice CSS Flex-Box, one can visit this website and play the game for better understanding of FlexBox.
• https://flexboxfroggy.com/
• FlexBox Froggy

Thanks everyone for reading..See you soon