FLEXBOX in css

FLEXBOX in css

Table of contents

No heading

No headings in the article.

Flex layout is used to give the container the ability to alter its item's width/height (and order) to best fill the available space. A flex container expands items to fill available free space or shrinks them to prevent overflow, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically based and inline which is horizontally based)

Properties of parent(flex container):

  1. Display: This defines a flex container. It enables a flex context for all its direct children.

    .container {
      display: flex; 
    }
    
  2. Flex-direction: This establishes the main axis, thus defining the direction flex items are placed in the flex container.

    .container {
      flex-direction: row | row-reverse | column | column-reverse;
    }
    
  3. flex-wrap: It wraps the content to make it more responsive while using the page on a different device.

    .container {
      flex-wrap: nowrap | wrap | wrap-reverse;
    }
    
  4. Flex-Flow: This is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes. The default value is row nowrap.

    .container {
      flex-flow: column wrap;
    }
    
  5. justify-content: This defines the alignment along the main axis. It helps distribute extra free space left over. It works horizontally in the container.

    .container {
      justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
    }
    
  6. align-items: This defines the default behavior for how flex items are laid out vertically.

    .container {
      align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
    }
    
  7. align-content: This aligns a flex container’s lines within when there is extra space in the cross-axis.It only works on multi-line flexible containers, where flex-wrap is set to either (wrap or wrap reverse).

    .container {
      align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
    }
    
  8. gap : controls the gap between the flex items but not on the outer edges.

    .container {
      display: flex;
      ...
      gap: 10px;
      gap: 10px 20px; /* row-gap column gap */
      row-gap: 10px;
      column-gap: 20px;
    }
    

Properties of child class

  1. order : the order property controls the order in which they appear in a flex container. The default order is the source order.

    .item {
      order: 5; /* default is 0 */
    }
    
  2. flex-grow: This defines the ability to grow the element. It tells what amount of the available space inside the flex container the item should take up.

    .item {
      flex-grow: 4; /* default 0 */
    }
    
  3. flex-shrink: This defines the ability of a flex item to shrink when needed.

    .item {
      flex-shrink: 3; /* default 1 */
    }
    
  4. align-self: This allows the default alignment to be overridden by individual flex items.

    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }