CSS Flexbox and Its Properties

CSS Flexbox, or Flexible Box Layout, is the layout model designed to create flexible and responsive layout structures without using float or positioning. By applying display: flex to a parent container, it becomes a flex container, and its children become flex items. This allows control over the items’ growth, shrinkage, and space distribution.

Note: Not all browsers support the flexbox properties, so make sure that the browser you are using supports this property.

Basics of Flexbox:

Apply a display type of flexbox to the parent container, this would make all the child elements in it to adjust into the flex type and these would be called the ” flex items “. This means they have become more flexible i.e. we can control how much they can shrink and how much they can grow and also the spacing between these elements.

Display: flex: Applies flexbox to the parent container, making child elements flex items.
Flex Items: Flexible elements that can grow, shrink, and adjust spacing.

The flex container can change the width, height and order of the child elements.
Items can grow or shrink to fill the available space or to prevent overflow.
Available space is distributed among other items.

Axes of Flexbox:

1. Main Axis: Direction of flex items (left-to-right, right-to-left, top-to-bottom, bottom-to-top).

A) left to right

flex-direction: row

B) right to left

flex-direction: row-reverse

C) top to bottom

flex-direction: column

D) bottom to top

flex-direction: column

2. Cross Axis: Perpendicular to the main axis.

Flexbox Properties:

1. Parent Properties:

display: Defines a flex container.
flex-direction: Defines the main axis direction.
flex-wrap: Allows items to wrap onto multiple lines.
flex-flow: Shorthand for flex-direction and flex-wrap .
justify-content: Aligns items along the main axis.
align-content: Aligns items along the cross axis.
align-items: Aligns multiple lines of items on the cross axis.

2. Children/Flex-items Properties:

order: Changes the order of items without altering the source order.
flex-grow: Allows an item to grow to fill available space.
flex-shrink: Allows an item to shrink if there’s insufficient space.
flex-basis: Defines the initial size of an item.
flex: Shorthand for flex-grow , flex-shrink , and flex-basis .
align-self: Aligns a single item within the flex container.

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 

    <style> 
        body { 
      display:flex;
            align-items: center; 
            justify-content: center; 
            color: green; 
            font-size: 50; 
        } 
        h2 { 
            margin: 10px; 
        } 
    </style> 
</head> 

<body> 
  <h2>CSS Flexbox</h2> 
    <h2>and Its Properties</h2> 
</body> 
</html>

Conclusion:

CSS Flexbox provides a systematic way to design flexible and responsive layout structures, enhancing web design by allowing easy arrangement, alignment, and distribution of space among items in a container. Understanding and using Flexbox properties can significantly improve the efficiency and flexibility of your web designs.

Tags:

#CSS-Questions #Technical Scripter 2020 #CSS #Technical Scripter #Web Technologies

Introduction to CSS Flexbox

CSS flex Property