A guide to flex model

Basic concept

Its is a new model introduced in CSS3, providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. Its an improvement to the conventional box model in that it does not use floats, nor do the flex container’s margins collapse with the margins of its contents.

Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

Basic terms

Flexbox layout is different from conventional box model in terms of terminologies as well, below is flex layout of row from left to right:

flex_terms

  • Flex container: Its an parent container where we set the display value as flex or inline-flex.
  • Flex item: Each child of flex container is knows as flex item.
  • Main axis: The main axis is a primary axis of a flex container along which all flex items are laid out (horizontal or vertical based on flex direction).
  • Main start – Main end: The flex items are placed within the container starting from main-start and going to main-end.
  • Main size: It is the flex item width or height which ever is the main dimension of the flex item.
  • Cross axis: It the axis perpendicular to the main axis.
  • Cross start – Cross end: Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
  • Cross size: It is the flex item width or height which ever is the cross dimension of the flex item.

Properties of flex container

  1. display: This is the main property which defines the flex layout it can be flex or inline-flex.
    .container {
      display: flex; /* or inline-flex */
    }
    
  2. flex-direction: This defines the direction of flex items around the main axis.
    .container {
      flex-direction: row | row-reverse | column | column-reverse;
    }
    
    • row: (Default) flex items direction is left to right
    • row-reverse: flex items direction is right to left
    • column: flex items direction from top to bottom
    • column-reverse: flex items direction bottom to top

    Example:


    1

  3. flex-wrap:This specifies whether flex items are forced into a single line or can be wrapped onto multiple lines.
    .container{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }
    
    • nowrap: (Default) flex items are laid out in a single line which may cause the flex container to overflow.
    • wrap: flex items break into multiple lines.
    • wrap-reverse: same as wrap but in reverse direction.

    Example:


    1

  4. flex-flow: This is the shorthand of flex-direction and flex-wrap and default of “row no-wrap”.
    flex-flow: <‘flex-direction’> || <‘flex-wrap’>
    
  5. justify-content: This is how browser distributes the space between the flex items
    .container {
      justify-content: flex-start | flex-end | center | space-between | space-around;
    }
    
    • flex-start: (Default) flex items are packed starting from the main-start. Margins of the first flex item is flushed with the main-start edge of the line and each following flex item is flushed with the preceding.
    • flex-end: flex items are packed starting from the main-end. The margin edge of the last flex item is flushed with the main-end edge of the line and each preceding flex item is flushed with the following.
    • center: flex items are packed toward the center of the line. The flex items are flushed with each other and aligned in the center of the line. Space between the main-start edge of the line and first item and between main-end and the last item of the line is the same.
    • space-between: flex items are evenly distributed along the line. The spacing is done such as the space between two adjacent items is the same. Main-start edge and main-end edge are flushed with respectively first and last flex item edges.
    • space-around: flex items are evenly distributed so that the space between two adjacent items is the same. The empty space before the first and after the last items equals half of the space between two adjacent items.

    Example:


    1

  6. align-items: This is same as justify content but along the cross axis.
    .container {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }
    
    • flex-start: (Default) The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.
    • flex-end: The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
    • center: The flex item’s margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.
    • baseline : All flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.
    • stretch: Flex items are stretched such as the cross-size of the item’s margin box is the same as the line while respecting width and height constraints.

    Example:


    1

  7. align-content:This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
    .container {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }
    
    • flex-start: (Default) Lines are packed starting from the cross-start. Cross-start edge of the first line and cross-start edge of the flex container are flushed together. Each following line is flush with the preceding.
    • flex-end: Lines are packed starting from the cross-end. Cross-end of the last line and cross-end of the flex container are flushed together. Each preceding line is flushed with the following line.
    • center: Lines are packed toward the center of the flex container. The lines are flushed with each other and aligned in the center of the flex container. Space between the cross-start edge of the flex container and first line and between cross-end of the flex container and the last line is the same.
    • space-between: Lines are evenly distributed in the flex container. The spacing is done such as the space between two adjacent items is the same. Cross-start edge and cross-end edge of the flex container are flushed with respectively first and last line edges.
    • space-around: Lines are evenly distributed so that the space between two adjacent lines is the same. The empty space before the first and after the last lines equals half of the space between two adjacent lines.
    • stretch: Lines stretch to use the remaining space. The free-space is split equally between all the lines.

    Example:


    1

Properties of flex items

  1. order: Default flex items are ordered as defined in source but we can change the order using this property.
    .item {
      order: <integer>;/*default 0*/
    }
    

    Example:


    1

  2. flex-grow: It specifies what amount of space inside the flex container the item should take up.
    .item {
      flex-grow: <number>;/*default 0*/
    }
    

    Example:


    1

  3. flex-shrink: It defines the ability for a flex item to shrink if necessary.
    .item {
      flex-shrink: <number>;/*default 1*/
    }
    

    Example:


    1

  4. flex-basis: It specifies the size of the default size of the content box before remaining space is distributed.
    .item {
      flex-basis: <length> | auto; /* default auto */
    }
    
    • length: a number followed by a absolute unit such as px, mm or pt, or a percentage of the parent flex container main size property. Negative values are invalid.
      content.
    • auto: automatic sizing of element based on content.

    Example:


    1

  5. flex: Its is an shorthand of flex-grow flex-shrink and flex-basis.
    .item {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }
    
  6. align-self:This property aligns flex items of the current flex line overriding the align-items value.
    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
    
    • auto: (Default) Computes to parent’s align-items value or stretch if the element has no parent.
    • flex-start: The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.
    • flex-end: The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
    • center: The flex item’s margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.
    • baseline: All flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.
    • stretch: Flex items are stretched such as the cross-size of the item’s margin box is the same as the line while respecting width and height constraints.

    Example:


    1

Posted in CSS

Leave a comment