Css Flex Box And Grid

Table of contents

No heading

No headings in the article.

Have you ever wondered how the images have aligned at different positions in a frontend webpage..?

The answer to this question is just simple, it is because of CSS elements called the flex and grid. Then let us see about these concepts.

CSS FLEXBOX :

Flexbox can be defined as a one-dimensional layout model that has flexible and efficient layouts with distributed spaces among items to control their alignment structures.

It is a layout model that provides an easy and clean way to arrange items within a container. It is very useful for creating small scales layouts and is responsive and mobile-friendly.

Items in flex will be laid out following either the main axis (from main-start to main-end) or the cross axis( from cross-start to cross-end).

  1. main axis - The main axis of a flex container is the primary axis along which flex items are laid out.

  2. main-start|main-end - The flex items are placed within the container starting from the main start and going to the main end.

  3. main size - A flex item's width or height, whichever is in the main dimension, is the item's main size.

  4. cross axis - The axis perpendicular to the main axis is called the cross axis.

  5. 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 towards the cross-end side.

  6. cross-size - The width or height of a flex item, whichever is in the cross dimension, is the item's cross-size.

FLEXBOX PROPERTIES

display: This defines a flex container inline or block depending on the given value.

.conatiner {
 display : flex;
}

flex-direction: This establishes the main- axis thus defining the direction flex items are placed in the flex container.

.conatiner {
    flex-direction: row| row-reverse |column |column-reverse;
}

justify-content: This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.

.container {
    justify-content : flex-start| flex-end| center| space-between| sapce-around | space-evenly;
}

align-items This defines the default behavior for how flex items are laid out along the cross-axis on the current line.

.conatiner {
align-items : stretch | flex-start | flex-end| center|baseline;
}

gap, row gap, column gap: The gap property explicitly controls the space between flex items. It applies that spacing only between the items not on the outer edges.

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

flex-shrink: This defines the ability of a flex item to shrink if necessary.

.item{
    flex-shrink : 3;
   }

CSS GRID

The CSS grid layout Module offers a grid-based layout-system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

  • Grid columns: The vertical lines of grid items are called columns.

  • Grid rows: The horizontal lines of grid items are called rows.

  • Grid gaps: The spaces between each column/row are called gaps.

  • Grid lines: The lines between columns are called column lines and the lines between rows are called row lines.

We can adjust the gap size by using one of the properties like column-gap, row-gap, and gap similar to that of in flexbox.

Display property: An HTML element becomes a grid container when its display property is set to grid or inline grid.

.grid container{
    display : grid;
}

CSS grid layout excels at dividing a page into major regions or defining the relationship [p in terms of size, position, and layer, between parts of a control built from HTML primitives.

These are about the basic concepts related to the CSS flexbox and grid.