CSS Properties

FlexBox Properties

  • What is it ?
    - Its Layout mode a CSS 3 concept
  • Why we need it ?
    - It helps to create responsive web pages
Flexbox Properties
  • display
  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • align-content
  • flex-flow
  • order
  • align-self
  • flex
flex-direction

This property is used to set the direction of flexible items. If the element is not a flexible item, the flex-direction property has no effect. We can set this property to row (default), row-reverse, column, column-reverse.

Example:

div {
flex-direction: column-reverse;
}

  • row - This is used to display the flexible items horizontally as row
  • row-reverse - This is used to display the flexible items same as row, but in reverse order
  • column - This is used to display the flexible items vertically as column
  • column-reverse - This is used to display the flexible items same as column, but in reverse order
justify-content

TThis property is used to align the flexible container's items when the items do not use all available space on the main-axis (horizontally). We can set this property to flex-start (default), flex-end, center, space-between, space-around.

Example:

div {
justify-content: center;
}

  • flex-start – This is used to position the item at the beginning of the container
  • flex-end – This is used to position the item at the end of the container
  • center - This is used to position the item at the center of the container
  • space-between - This is used to position the item with space between the lines
  • space-around - This is used to position the item with space before, between, and after the lines
align-items

This property is used to specify the default alignment for items inside the container. This property can be override using align-self property for each item. We can set this property to stretch (default), center, flex-start, flex-end, baseline.

Example:

div {
align-items: center;
}

  • stretch – This is used to stretch the item to fit the container
  • center – This is used to position the item at the center of the container
  • flex-start - This is used to position the item at the beginning of the container
  • flex-end - This is used to position the item at the end of the container
  • baseline - This is used to position the item at the baseline of the container
flex-wrap

This property is used to specify whether the flexible items should wrap or not. If the elements are not flexible items, the flex-wrap property has no effect. We can set this property to nowrap (default), wrap and wrap-reverse.

Example:

div {
flex-wrap: wrap;
}

  • nowrap – It specifies that the flexible items will not wrap
  • wrap – It specifies that the flexible items will wrap if necessa
  • wrap-reverse – It specifies that the flexible items will wrap, if necessary, in reverse order
align-content

This property is used to modify the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. There must be multiple lines of items for this property to have any effect. We can set this property to stretch (default), center, flex-start, flex-end, space-between, space-around.

Example:

div {
align-content: center;
}

  • stretch - Lines stretch to take up the remaining space
  • center - Lines are packed toward the center of the flex container
  • flex-start - Lines are packed toward the start of the flex container
  • flex-end - Lines are packed toward the end of the flex container
  • space-between - Lines are evenly distributed in the flex container
  • space-around - Lines are evenly distributed in the flex container, with half-size spaces on either end
flex-flow

TIt is a shorthand property for the flex-direction and the flex-wrap properties. If the elements are not flexible items, the flex-flow property has no effect.

Syntax:

Selector {
flex-flow: flex-direction flex-wrap;
}

Example:

div {
flex-flow: row-reverse wrap;
}

order

This property is used to specify the order of a flexible item relative to the rest of the flexible items inside the same container. If the element is not a flexible item, the order property has no effect. We can set this property to number (default 0).

Example:

div {
order: 1;
}

align-self

This property is used to specify the alignment for the selected item inside the flexible container. The align-self property overrides the flexible container's align-items property. We can set this property to auto (default), stretch, center, flex-start, flex-end, baseline.

Example:

div {
align-self: center;
}

  • auto - The element inherits its parent container's align-items property, or "stretch" if it has no parent container
  • stretch – This is used to position the element to fit the container
  • center - This is used to position the element at the center of the container
  • flex-start - This is used to position the element at the beginning of the container
  • flex-end - This is used to position the element at the end of the container
  • baseline - This is used to position the element at the baseline of the container
flex-grow

This property is used to specify how much the item will grow relative to the rest of the flexible items inside the same container. If the element is not a flexible item, the flex-grow property has no effect. We can set this property to number (default 0).

Example:

div {
flex-grow: 1;
}

flex-shrink

This property is used to specify how the item will shrink relative to the rest of the flexible items inside the same container. If the element is not a flexible item, the flex-shrink property has no effect. We can set this property to number (default 1).

Example:

div {
flex-shrink: 2;
}

flex-basis

This property is used to specify the initial length of a flexible item. If the element is not a flexible item, the flex-basis property has no effect. We can set this property to number and auto (default).

Example:

div {
flex-basis: 3;
}

  • number - A length unit, or percentage, specifying the initial length of the flexible item(s)
  • auto - The length is equal to the length of the flexible item. If the item has no length specified, the length will be according to its conten
flex

This property is used to specify the length of the item, relative to the rest of the flexible items inside the same container. If the element is not a flexible item, the flex property has no effect.
The flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties.

Syntax:

Selector {
flex: flex-grow flex-shrink flex-basis
}

Example:

div {
flex: 2 3;
}
Cristle Academy

Compiler