Skip to content
Related Articles

Related Articles

Improve Article

Introduction to CSS Flexbox

  • Last Updated : 03 Nov, 2020

CSS flexible box module is one dimensional layout model.

  1. Flexible and efficient layouts.
  2. Distribute space among items.
  3. Control their alignment.

Before flexbox we had 4 layout modes

  1. Block: It is used to make sections in a webpages.
  2. Inline: It is used for text.
  3. Table: It is used for two dimensional data.
  4. Positioned: It is used for explicit position of an element.

Features of flexbox:

  1. A lot of flexibility is given.
  2. Arranged items.
  3. Proper spacing
  4. Alignment of items.
  5. Order of items.
  6. Bootstrap 4 is build on the top of the flex layout.

Terminologies: There are 2 main components –

  1. Flex Container
  2. Flex Items

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.




<div class="container">
  
    <!-- CONTAINER -->
    <div>Item1</div>
      
    <!--ITMES-->
    <div>Item2</div>
    <div>Item3</div>
</div>

Flexbox Axes: While working with Flexbox, we deal with 2 axis –

  1. Main Axis
  2. Cross Axis

Main Axis:

  • In default, main axis run from left to right.
  • Main Start: Start of main axis is called Main Start.
  • Main Size: The length between Main Start and Main End is called Main Size.
  • Main End: The end point is called Main End.
  • Main And Cross Axis


Cross Axis:

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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.

My Personal Notes arrow_drop_up
Recommended Articles
Page :