My Blog

Flexbox

—

by

Awais Farooq
in

Flexbox is used to quickly manage the layout, alignment and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

You can also do complex implementations using custom CSS.

Flexbox Properties:

  • Enable flex behaviors
  • Direction
  • Justify content
  • Align items
  • Align self
  • Auto margins with justify-content
  • Auto margins with align-items
  • Wrap
  • Order
  • Align content

Enable Flex Behavior

The “display” utility is used to create a flexible container and transform direct children elements into flex items.

You can modify flex container and items further with additional flex properties.

Default flexbox container:

<div class="d-flex p-2">I'm a flexbox container!</div>  

Inline Flexbox container:

<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>  

Responsive flexbox container:

Responsive variations also exist for .d-flex and .d-inline-flex.

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex

Flexbox Direction

You can set the direction of flex item in a flex container using direction utilities. It is not necessary to add a horizontal class here because by default it is row. If you find a situation where you have to set this value you can use “.flex-row” to set a horizontal direction (the browser default), or ?.flex-row-reverse? to start the horizontal direction from the opposite side.

Example

Horizontal Direction (By default)

<div class="d-flex flex-row">  

  <div class="p-2">Flex item 1</div>  

  <div class="p-2">Flex item 2</div>  

  <div class="p-2">Flex item 3</div>  

</div>  

<div class="d-flex flex-row-reverse">  

  <div class="p-2">Flex item 1</div>  

  <div class="p-2">Flex item 2</div>  

  <div class="p-2">Flex item 3</div>  

</div> 

    Vertical Direction

    You can use the “.flex-column” to set a vertical direction, or “.flex-column-reverse” to start the vertical direction from the opposite side.

    Example

    <div class="d-flex flex-column">  

  <div class="p-2">Flex item 1</div>  

  <div class="p-2">Flex item 2</div>  

  <div class="p-2">Flex item 3</div>  

</div>  

<div class="d-flex flex-column-reverse">  

  <div class="p-2">Flex item 1</div>  

  <div class="p-2">Flex item 2</div>  

  <div class="p-2">Flex item 3</div>  

</div>

    Responsive variations can also be used for flex-direction:

    Rows:

    .flex-row
    .flex-row-reverse

    Columns:

    .flex-column
    .flex-column-reverse

    Small:

    .flex-sm-row
    .flex-sm-row-reverse
    .flex-sm-column
    .flex-sm-column-reverse

    Medium:

    .flex-md-row
    .flex-md-row-reverse
    .flex-md-column
    .flex-md-column-reverse

    Large:

    .flex-lg-row
    .flex-lg-row-reverse
    .flex-lg-column

    .flex-lg-column-reverse

    Extra-large:

    .flex-xl-row
    .flex-xl-row-reverse
    .flex-xl-column
    .flex-xl-column-reverse

    Justify Content

    The justify-content utility is used to change the alignment of flex-items on the main axis.

    Example:

    <div class="d-flex justify-content-start">...</div>  

<div class="d-flex justify-content-end">...</div>  

<div class="d-flex justify-content-center">...</div>  

<div class="d-flex justify-content-between">...</div>  

<div class="d-flex justify-content-around">...</div> 

      Responsive variations for justify-content

      You can also use responsive variations with justify-content.

      • .justify-content-start
      • .justify-content-end
      • .justify-content-center
      • .justify-content-between
      • .justify-content-around
      • .justify-content-sm-start
      • .justify-content-sm-end
      • .justify-content-sm-center
      • .justify-content-sm-between
      • .justify-content-sm-around
      • .justify-content-md-start
      • .justify-content-md-end
      • .justify-content-md-center
      • .justify-content-md-between
      • .justify-content-md-around
      • .justify-content-lg-start
      • .justify-content-lg-end
      • .justify-content-lg-center
      • .justify-content-lg-between
      • .justify-content-lg-around
      • .justify-content-xl-start
      • .justify-content-xl-end
      • .justify-content-xl-center
      • .justify-content-xl-between
      • .justify-content-xl-around

      Align Items

      The align items utility is used on flexbox containers to change the alignment of flex items on the cross axis. You can choose from start, end, center, baseline, or stretch (browser default).

      Example:

       <div class="d-flex align-items-start">...</div>  

<div class="d-flex align-items-end">...</div>  

<div class="d-flex align-items-center">...</div>  

<div class="d-flex align-items-baseline">...</div>  

<div class="d-flex align-items-stretch">...</div> 

        Responsive variations for align-items

        You can also use responsive variations for align-items.

        • .align-items-start
        • .align-items-end
        • .align-items-center
        • .align-items-baseline
        • .align-items-stretch
        • .align-items-sm-start
        • .align-items-sm-end
        • .align-items-sm-center
        • .align-items-sm-baseline
        • .align-items-sm-stretch
        • .align-items-md-start
        • .align-items-md-end
        • .align-items-md-center
        • .align-items-md-baseline
        • .align-items-md-stretch
        • .align-items-lg-start
        • .align-items-lg-end
        • .align-items-lg-center
        • .align-items-lg-baseline
        • .align-items-lg-stretch
        • .align-items-xl-start
        • .align-items-xl-end
        • .align-items-xl-center
        • .align-items-xl-baseline
        • .align-items-xl-stretch

        Align Self

        The align-self-utility is used on flexbox items to individually change their alignment on the cross axis. You can choose from the same options as align-items: start, end, center, baseline, or stretch (browser default).

        Example:

        <div class="align-self-start">Aligned flex item</div>  

<div class="align-self-end">Aligned flex item</div>  

<div class="align-self-center">Aligned flex item</div>  

<div class="align-self-baseline">Aligned flex item</div>  

<div class="align-self-stretch">Aligned flex item</div> 

          Responsive variation for align-self

          You can also use responsive variations for align-self.

          • .align-self-start
          • .align-self-end
          • .align-self-center
          • .align-self-baseline
          • .align-self-stretch
          • .align-self-sm-start
          • .align-self-sm-end
          • .align-self-sm-center
          • .align-self-sm-baseline
          • .align-self-sm-stretch
          • .align-self-md-start
          • .align-self-md-end
          • .align-self-md-center
          • .align-self-md-baseline
          • .align-self-md-stretch
          • .align-self-lg-start
          • .align-self-lg-end
          • .align-self-lg-center
          • .align-self-lg-baseline
          • .align-self-lg-stretch
          • .align-self-xl-start
          • .align-self-xl-end
          • .align-self-xl-center
          • .align-self-xl-baseline
          • .align-self-xl-stretch

          Auto margins

          In flexbox, you can mix flex alignments with auto margins to do some pretty awesome things.

          With justify-content

          You can easily move all flex items to one side, but keep another on the opposite end by mixing justify-content with margin-right: auto or margin-left: auto.

          Example:

          <div class="d-flex justify-content-end">  

  <div class="mr-auto p-2">Flex item</div>  

  <div class="p-2">Flex item</div>  

  <div class="p-2">Flex item</div>  

</div>  

  

<div class="d-flex justify-content-start">  

  <div class="p-2">Flex item</div>  

  <div class="p-2">Flex item</div>  

  <div class="ml-auto p-2">Flex item</div>  

</div> 

            With align-items

            You can similarly move one flex item to the top or bottom of a container by mixing align-items, flex-direction: column, and margin-top: auto or margin-bottom: auto.

            Example:

            <div class="d-flex align-items-start flex-column" style="height: 200px;">  

  <div class="mb-auto p-2">Flex item</div>  

  <div class="p-2">Flex item</div>  

  <div class="p-2">Flex item</div>  

</div>  

  

<div class="d-flex align-items-end flex-column" style="height: 200px;">  

  <div class="p-2">Flex item</div>  

  <div class="p-2">Flex item</div>  

  <div class="mt-auto p-2">Flex item</div>  

</div> 

              Wrap

              It is used to change how flex items wrap in a flex container. You can choose the following:

              No wrapping: .flex-nowrap

              Wrapping: .flex-wrap

              Reverse wrapping: .flex-wrap-reverse

              Responsive variation for flex-wrap

              You can also use responsive variations for flex-wrap.

              • .flex-nowrap
              • .flex-wrap
              • .flex-wrap-reverse
              • .flex-sm-nowrap
              • .flex-sm-wrap
              • .flex-sm-wrap-reverse
              • .flex-md-nowrap
              • .flex-md-wrap
              • .flex-md-wrap-reverse
              • .flex-lg-nowrap
              • .flex-lg-wrap
              • .flex-lg-wrap-reverse
              • .flex-xl-nowrap
              • .flex-xl-wrap
              • .flex-xl-wrap-reverse

              Order:

              It is used to change the visual order of specific flex items with a handful of order utilities.

              You can make an item first or last, as well as a reset to use the DOM order. As order takes any integer value (e.g., 5), add custom CSS for any additional values needed.

              Example:

              <div class="d-flex flex-nowrap">  

  <div class="flex-last p-2">First flex item</div>  

  <div class="p-2">Second flex item</div>  

  <div class="flex-first p-2">Third flex item</div>  

</div> 

                Responsive variations for order

                You can also use responsive variations for order:

                • .order-first
                • .order-last
                • .order-unordered
                • .order-sm-first
                • .order-sm-last
                • .order-sm-unordered
                • .order-md-first
                • .order-md-last
                • .order-md-unordered
                • .order-lg-first
                • .order-lg-last
                • .order-lg-unordered
                • .order-xl-first
                • .order-xl-last
                • .order-xl-unordered

                Align Content

                The align-content utility is used on flexbox container to align flex items together on the cross axis. You can choose from start (browser default), end, center, between, around, or stretch.

                To demonstrate these utilities, we?ve enforced flex-wrap: wrap and increased the number of flex items.

                Heads up! This property has no affect on single rows of flex items.

                start:

                <div class="d-flex align-content-start flex-wrap">  

  ...  

</div> 

                  end:

                  <div class="d-flex align-content-end flex-wrap">...</div>  

                  center:

                  <div class="d-flex align-content-center flex-wrap">...</div>    

                  between:

                  <div class="d-flex align-content-between flex-wrap">...</div>  

                  around:

                  <div class="d-flex align-content-around flex-wrap">...</div>  

                  stretch:

                  <div class="d-flex align-content-stretch flex-wrap">...</div>  

                  Responsive variations for align-content

                  You can also use responsive variations for align-content:

                  • .align-content-start
                  • .align-content-end
                  • .align-content-center
                  • .align-content-around
                  • .align-content-stretch
                  • .align-content-sm-start
                  • .align-content-sm-end
                  • .align-content-sm-center
                  • .align-content-sm-around
                  • .align-content-sm-stretch
                  • .align-content-md-start
                  • .align-content-md-end
                  • .align-content-md-center
                  • .align-content-md-around
                  • .align-content-md-stretch
                  • .align-content-lg-start
                  • .align-content-lg-end
                  • .align-content-lg-center
                  • .align-content-lg-around
                  • .align-content-lg-stretch
                  • .align-content-xl-start
                  • .align-content-xl-end
                  • .align-content-xl-center
                  • .align-content-xl-around
                  • .align-content-xl-stretch

                  Comments

                  Leave a Reply

                  Your email address will not be published. Required fields are marked *