Css Module 10

  Module 10 : CSS Flexbox Basics – Introduction to Flexbox, Main Axis, Cross Axis, and Basic Properties

Introduction to Flexbox

CSS Flexbox (Flexible Box) is a layout model designed to efficiently arrange, align, and distribute space among items within a container, even when their sizes are unknown or dynamic. Flexbox is especially useful for creating responsive web designs and managing element alignment without using float or positioning hacks.

         

Flexbox provides two primary components:

Flex Container – The parent element that holds and manages flex items. It is defined by applying display: flex or display: inline-flex.

Flex Items – The child elements inside the flex container that can be controlled with various flex properties.

Main Axis and Cross Axis

Before diving into Flexbox properties, it's important to understand the concept of axes:

Main Axis: The primary axis along which flex items are placed. The direction is defined by the flex-direction property.

If flex-direction: row, the main axis runs horizontally (left to right by default).

If flex-direction: column, the main axis runs vertically (top to bottom by default).

Cross Axis: The perpendicular axis to the main axis.

If the main axis is horizontal (row), the cross axis is vertical.

If the main axis is vertical (column), the cross axis is horizontal.

Understanding these axes helps in controlling alignment, spacing, and layout behavior.

Basic Properties of Flexbox

1. Display Property

To enable Flexbox, set display: flex or display: inline-flex on a container.

       

.container {

display: flex; /* Makes it a flex container */

}

flex → Block-level flex container

inline-flex → Inline-level flex container

2. flex-direction (Main Axis Control)

Determines the direction of the main axis.

.container {

display: flex;

flex-direction: row; /* Default: items arranged from left to right */

}

Possible values:

row → Left to right (default)

row-reverse → Right to left

column → Top to bottom

column-reverse → Bottom to top

Example:

<div class="container">

<div class="box">1</div>

<div class="box">2</div>

<div class="box">3</div>

</div>

.container {

display: flex;

flex-direction: column;

}

.box {

width: 100px;

height: 100px;

background-color: lightblue;

margin: 5px;

}

Result: The boxes will be stacked vertically instead of horizontally.

3. justify-content (Align Items Along Main Axis)

Controls how items are distributed along the main axis.

     

 

 

.container {

display: flex;

justify-content: center;

}

Possible values:

flex-start → Items align to the start of the container (default)

flex-end → Items align to the end of the container

center → Items align at the center

space-between → Items spread out with space between them

space-around → Items have equal space around them

space-evenly → Items have equal space between and outside

Example:

.container {

display: flex;

justify-content: space-around;

}

Result: Each item has equal space around it.

4. align-items (Align Items Along Cross Axis)

Controls how items are aligned along the cross axis.

.container {

display: flex;

align-items: center;

}

Possible values:

stretch → Items stretch to fill the container (default)

flex-start → Items align to the start of the cross axis

flex-end → Items align to the end of the cross axis

center → Items align at the center of the cross axis

baseline → Items align based on their text baseline

Example:

.container {

display: flex;

align-items: flex-start;

}

Result: Items align at the top of the flex container.

5. align-self (Individual Item Alignment)

Overrides align-items for a single flex item.

         

.box:nth-child(2) {

align-self: flex-end;

}

Possible values: Same as align-items.

6. flex-wrap (Wrapping Items)

Controls whether flex items should wrap onto a new line if they exceed the container’s width.

.container {

display: flex;

flex-wrap: wrap;

}

Possible values:

nowrap → All items stay on one line (default)

wrap → Items wrap to the next line

wrap-reverse → Items wrap in reverse

Example:

.container {

display: flex;

flex-wrap: wrap;

}

Result: If the items exceed the container width, they move to the next line.

7. flex (Shorthand for Growth, Shrink, and Basis)

Defines how flex items grow, shrink, or set a base width.

.box {

flex: 1; /* Each box takes equal space */

}

Shorthand:

flex: grow shrink basis;

Example values:

flex: 1 1 auto; → Grow if possible, shrink if needed, auto width

flex: 0 1 auto; → No growth, but can shrink

flex: 1 0 200px; → Grow equally, no shrink, base size 200px

Practical Exercise: Creating a Responsive Navigation Bar

HTML

     

  

         

<nav class="navbar">

<div class="logo">Logo</div>

<ul class="nav-links">

     <li>Home</li>

     <li>About</li>

     <li>Services</li>

     <li>Contact</li>

</ul>

</nav>

CSS

.navbar {

display: flex;

justify-content: space-between;

align-items: center;

background-color: #333;

padding: 15px;

color: white;

}

.nav-links {

display: flex;

list-style: none;

gap: 20px;

}

Result: A responsive navigation bar with evenly spaced links.

Conclusion

Flexbox is a powerful layout tool that simplifies aligning elements. Understanding the main axis, cross axis, and core properties like justify-content, align-items, and flex-wrap is essential for mastering responsive web design.