Skip to content
Related Articles

Related Articles

Introduction to CSS Flexbox

View Discussion
Improve Article
Save Article
  • Last Updated : 29 Oct, 2021

The flexbox or flexible box model in CSS is a one-dimensional layout model that has flexible and efficient layouts with distributed spaces among items to control their alignment structure ie., it is a layout model that provides an easy and clean way to arrange items within a container. Flexbox can be useful for creating small-scales layouts & is responsive and mobile-friendly.

Features of flexbox:

  • A lot of flexibility is given.
  • Arrangement & alignment of items.
  • Proper spacing
  • Order & Sequencing of items.
  • Bootstrap 4 is built on top of the flex layout.

Before the flexbox model, we had 4 layout modes:

  • Block: It is used to make sections in web pages.
  • Inline: It is used for text.
  • Table: It is used for two-dimensional table data.
  • Positioned: It is used for the explicit position of an element.

There are 2 main components of the Flexbox:

  • Flex Container: The parent “div” which contains various divisions is called a flex container.
  • Flex Items: The items inside the container “div” are flex items.

For creating the flexbox, we need to create a flex container along with setting the display property to flex.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Flexbox Tutorial</title>
    <style>
    .flex-container {
        display: flex;
        background-color: #32a852;
    }
     
    .flex-container div {
        background-color: #c9d1cb;
        margin: 10px;
        padding: 10px;
    }
    </style>
</head>
 
<body>
    <h2>GeeksforGeeks</h2>
    <h4> Flexbox</h4>
    <div class="flex-container">
        <div>Item1</div>
        <div>Item2</div>
        <div>Item3</div>
    </div>
</body>
 
</html>

Output:

Flexbox Axes: While working with Flexbox, we deal with 2 axes:

  • Main Axis
  • Cross Axis

Main Axis:

  • By default, the main axis runs from left to right.
  • Main Start: The start of the main axis is called Main Start.
  • Main Size: The length between Main Start and Main End is called Main Size.
  • Main End: The endpoint is called Main End.
  • Main And Cross Axis

left to right:

flex-direction: row;

right to left:

flex-direction: row-reverse;

top to bottom:

flex-direction: column;

bottom to top:

flex-direction: column;

Cross Axis: The cross axis will be perpendicular to the main axis.

  • By default, Cross Axis runs perpendicular to the Main Axis i.e. from top to bottom.
  • Cross Start: The start of the Cross axis is called Cross Start.
  • Cross Size: The length between Cross Start and Cross End is called Cross Size.
  • Cross End: The endpoint is called Cross End.

Supported Browsers:

  • Google Chrome 29.0
  • Firefox 22.0
  • Microsoft Edge 11.0
  • Opera 48.0
  • Safari 10.0

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!