"I am Saqib Jahangir. A passionate vlogger, software engineer, trainer and avid traveler with a deep love for exploring the hidden gems of our beautiful planet. With a strong foundation in Application Development, Application Architecture & Database Design and Product Management, I bring over a decade of hands-on experience building secure, scalable, and resilient web applications for a diverse range of industries."

Flexbox (Flexible Box Layout)

 

Flexbox is a powerful CSS layout module designed to help you arrange items in a container efficiently, even when their size is unknown or dynamic. It provides an easy and clean way to align, distribute, and order elements within a container, making responsive design much simpler.

Why Use Flexbox?

Traditional layout methods like floats and positioning can get complicated when you want to create flexible, adaptable layouts. Flexbox simplifies this by:

  • Aligning items horizontally or vertically with ease
  • Distributing space evenly between items or around them
  • Changing the order of elements visually without altering the HTML
  • Handling dynamic or unknown item sizes gracefully

How Flexbox Works

To use Flexbox, you set the container’s display property to flex or inline-flex:

.container {

  display: flex;

}

This turns the container into a flex container, and all its direct children become flex items.

Main Concepts and Properties

  • Main Axis and Cross Axis
    Flexbox layouts operate along two axes: the main axis (default is horizontal, left to right) and the cross axis (perpendicular to the main axis, vertical by default).
  • flex-direction
    Defines the direction of the main axis. Common values:
    • row (default): left to right
    • row-reverse: right to left
    • column: top to bottom
    • column-reverse: bottom to top
  • justify-content
    Aligns items along the main axis. Options include:
    • flex-start (default)
    • center
    • flex-end
    • space-between
    • space-around
    • space-evenly
  • align-items
    Aligns items along the cross axis (vertical by default). Values:
    • stretch (default)
    • flex-start
    • center
    • flex-end
    • baseline
  • flex-wrap
    Controls whether items wrap onto multiple lines or stay on one line. Values:
    • nowrap (default)
    • wrap
    • wrap-reverse
  • align-content
    When there are multiple lines (due to wrapping), this aligns the entire group of lines along the cross axis.
  • flex-grow, flex-shrink, flex-basis
    Control how individual flex items grow, shrink, or take up space inside the container.

Simple Example

.container {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

This will place items in a row, evenly spaced, and vertically centered.

Popular Posts

Operators (Arithmetic, Comparison, Logical)

  Operators in PHP are symbols that perform operations on variables and values. They are essential for performing calculations, comparing values, and making logical decisions in your code. PHP supports several types of operators, including arithmetic, comparison, and logical operators. Arithmetic Operators Arithmetic operators are used to perform basic mathematical operations. Example: <?php $a = 10; $b = 3;   echo $a + $b; // 13 echo $a - $b; // 7 echo $a * $b; // 30 echo $a / $b; // 3.3333 echo $a % $b; // 1 (modulus) echo $a ** $b; // 1000 (exponentiation) ?> Comparison Operators Comparison operators are used to compare two values. They return true or false . Example: <?php $x = 5; $y = 10;   var_dump($x == $y);   // false var_dump($x != $y);   // true var_dump($x === $y); // false (checks value and type) var_dump($x !== $y); // true var_dump($x > $y);    // false var_dum...
Read more

Functions (Built-in & User-defined)

  Functions in PHP are blocks of code designed to perform a specific task. They help make code reusable, organized, and easier to maintain. PHP provides built-in functions for common tasks, and also allows you to create your own user-defined functions . Built-in Functions PHP has hundreds of built-in functions that perform predefined operations such as string manipulation, mathematical calculations, and array handling. Example (Built-in Functions): <?php // String length echo strlen("Hello World"); // Outputs: 11   // Find maximum value in an array echo max(10, 20, 30); // Outputs: 30   // Convert string to uppercase echo strtoupper("php is awesome"); // Outputs: PHP IS AWESOME ?> User-defined Functions You can create your own functions to execute code whenever needed. This helps reduce repetition and makes programs easier to read. Syntax: function functionName($parameter1, $parameter2) {     // Code to...
Read more