Understanding Flexbox: Aligning and Distributing Items Easily

CSS Flexbox (Flexible Box Layout) is a powerful layout system that helps align and distribute items efficiently within a container. It is particularly useful for building responsive and dynamic layouts without relying on floats or positioning.

What is Flexbox?

Flexbox is a one-dimensional layout model that allows you to align elements horizontally (row) or vertically (column) inside a container. It makes it easy to distribute space between items and align them properly.

Flex Container Properties (Applied to Parent)

These properties are used on the flex container (display: flex; or display: inline-flex;).

To use Flexbox, simply set the display property to flex on a container:

.flex-container {
  display: flex;
  flex-direction: row;
}

The column value displays the flex items vertically (from top to bottom):

.flex-container {
  display: flex;
  flex-direction: column;
}

The row-reverse value displays the flex items horizontally (but from right to left):

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

The column-reverse value displays the flex items vertically (but from bottom to top):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

How flex-wrap Works (Examples) :

The flex-wrap property specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line.

The nowrap value specifies that the flex items will not wrap (this is default):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

The wrap value specifies that the flex items will wrap if necessary:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

The wrap-reverse value specifies that the flex items will wrap if necessary, in reverse order:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

How flex-flow Works Example :

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

How justify-content Works (Examples) :

The justify-content property is used to align the flex items when they do not use all available space on the main-axis (horizontally).

The justify-content property can have one of the following values:

• center

• flex-start

• flex-end

• space-around

• space-between

• space-evenly

The center value positions the flex items in the center of the container:

.flex-container {
  display: flex;
  justify-content: center;
}

The flex-start value positions the flex items at the beginning of the container (this is default):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

The flex-end value positions the flex items at the end of the container:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

The space-around value displays the flex items with space around them:

.flex-container {
  display: flex;
  justify-content: space-around;
}

The space-between value displays the flex items with space between them:

.flex-container {
  display: flex;
  justify-content: space-between;
}

The space-evenly value displays the flex items with equal space around them:

.flex-container {
  display: flex;
  justify-content: space-evenly;
}

How align-items Works (Examples) :

The align-items property is used to align the flex items when they do not use all available space on the cross-axis (vertically).

The align-items property can have one of the following values:

• center

• flex-start

• flex-end

• stretch

• baseline

• normal

The center value positions the flex items in the middle of the container:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

The flex-start value positions the flex items at the top of the container:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

The flex-end value positions the flex items at the bottom of the container:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

The stretch value stretches the flex items to fill the container (this is equal to "normal" which is default):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

The baseline value positions the flex items at the baseline of the container:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

CSS align-content Property (Examples) :

The align-content property is used to align the flex lines.

The align-content property is similar to align-items, but instead of aligning flex items, it aligns the flex lines.

The align-content property can have one of the following values:

• center

• stretch

• flex-start

• flex-end

• space-around

• space-between

• space-evenly

With center, the flex lines are packed toward the center of the container:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

With stretch, the flex lines stretch to take up the remaining space of the container (this is default):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

With flex-start, the flex lines are packed toward the start of the container:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

With flex-end, the flex lines are packed toward the end of the container:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

With space-between, the space between the flex lines are equal, but the first item is flush with the start edge of the container, and the last item is flush with the end edge of the container:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

With space-around, the space between the flex lines are equal, but the space before the first item and after the last item is set to half of the space between the flex lines:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

With space-evenly, the flex lines are evenly distributed in the flex container, with equal space on top, bottom and between:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-evenly;
}

Perfect Centering :

Set both the justify-content and align-items properties to center, and the flex item will be perfectly centered:

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

CSS Grid Basics: Creating Complex Layouts with Ease :

When it comes to designing web layouts, CSS Grid is a powerful tool that makes it easy to create complex designs with minimal effort. Whether you're building a simple webpage or a dynamic dashboard, CSS Grid provides flexibility and control over how elements are arranged. In this blog, we’ll explore the basics of CSS Grid and how you can use it to design responsive layouts effortlessly.

What is CSS Grid?

CSS Grid is a layout system in CSS that allows you to arrange elements in rows and columns. Unlike Flexbox, which works in one direction (either row or column), CSS Grid lets you design two-dimensional layouts, making it perfect for complex structures.

.container {
  border: 2px solid grey;
  display: grid;
  grid-template-rows: repeat(4, 150px);
  grid-template-columns: repeat(4, 150px);
  grid-gap: 20px;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 3;
}

• Container Setup:

  • display: grid;: This property transforms the .container div into a grid container, enabling the use of grid layout properties for its child elements.

  • grid-template-rows: repeat(4, 150px);: This defines four rows, each with a height of 150 pixels. The repeat function simplifies the declaration by repeating the 150px value four times.

  • grid-template-columns: repeat(4, 150px);: Similarly, this defines four columns, each 150 pixels wide.

  • grid-gap: 20px;: This property sets a 20-pixel gap between each grid item, both horizontally and vertically, providing visual separation between items.

• Item Placement:

  • .item1 Styling:

    • grid-row-start: 1;: This positions the start of item1 at the first row line.

    • grid-row-end: 4;: This positions the end of item1 at the fourth row line. Since grid lines are numbered starting from 1, this means item1 will span rows 1 through 3, covering three rows in total.

    • grid-column-start: 1;: This positions the start of item1 at the first column line.

    • grid-column-end: 3;: This positions the end of item1 at the third column line, causing it to span across the first and second columns.

Creating a Simple Website Layout Using CSS Grid :

<div class="website">
    <div class="header">
        <h2>My Header</h2>
    </div>
    <div class="content">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit, amet consectetur iusto, adipisci ducimus. Alias, illo?</p>
        <p>Lorem ipsum dolor sit, amet consectetur iusto, adipisci ducimus. Alias, illo?</p>
        <p>Lorem ipsum dolor sit, amet consectetur iusto, adipisci ducimus. Alias, illo?</p>
    </div>
    <div class="ads">
        <p>Ads 1</p><br>
        <p>Ads 2</p><br>
        <p>Ads 3</p>
    </div>
    <div class="footer">
        <h4>Footer</h4>
    </div>
</div>

This markup defines the four sections:

1. Header - Displays the main title of the website.

2. Content - Contains text paragraphs.

3. Ads Section - Displays advertisements.

4. Footer - The bottom section of the page.

CSS Grid Layout Styling

Setting Up the Body

body {
    color: aliceblue;
    margin: 25px;
    background-color: #1c1c1c;
}

• The text color is set to aliceblue, making it visible against the dark background.

• The background color is a dark shade #1c1c1c.

• A margin: 25px; ensures spacing around the webpage.

Defining the Grid Layout

.website {
    font-size: 25px;
    display: grid;
    border: 1px solid #8b8b8b;
    grid-template-areas: 
        "header header header"
        "content content ads"
        "content content ads"
        "footer footer footer";
}

• display: grid; makes the .website container a grid.

• grid-template-areas defines a three-column layout:

  • The header spans all three columns.

  • The content spans two columns while the ads section takes the third column.

  • The footer spans all three columns.

Styling the Sections

.header {
    grid-area: header;
    border: 2px solid #8b8b8b;
}
.content {
    grid-area: content;
    padding: 20px;
    border: 2px solid #8b8b8b;
}
.ads {
    grid-area: ads;
    align-items: center;
    text-align: center;
    border: 2px solid #8b8b8b;
}
.footer {
    grid-area: footer;
    text-align: center;
    border: 2px solid #8b8b8b;
}

In this example, each class (.header, .content, .ads, .footer) is assigned a specific grid area name. These names can then be utilized in the grid container's grid-template-areas property to define the layout structure.

By leveraging the grid-area property, you can create clear and maintainable grid layouts, enhancing both the development process and the readability of your CSS code.