Table of contents
Introduction
CSS Flexbox is a layout module that allows us to easily create flexible and responsive layouts for our web pages. It works by dividing a container element into a flexible box, where we can position and align content along a single axis or multiple axes. When we describe flexbox as being one-dimensional we are describing the fact that flexbox deals with the layout in one dimension at a time — either as a row or as a column.
Why do we use Flex Box in CSS
We use Flex Box for following reasons:
-Flexibility : Flexbox allows us to create flexible layouts that adapt to different screen sizes and devices. By using Flexbox, we can easily create responsive designs that look great on all devices, from large desktop screens to small mobile devices.
-Efficiency : Flexbox allows us to create complex layouts with relative ease, by dividing the page into a flexible box and positioning content along a single axis or multiple axes. This makes it easier to create dynamic and engaging designs, without having to resort to complex and hard-to-maintain CSS code.
-Easy alignment : Flexbox provides an easy way to align content both vertically and horizontally, which can be difficult to achieve with other CSS layout techniques.
-Accessibility : Flexbox allows us to create accessible layouts that are easy to navigate and understand for all users, including those with visual impairments or other disabilities.
-Browser compatibility : Flexbox is supported by all modern browsers which makes it a reliable and widely adopted CSS layout technique.
Properties
Here are some of the key properties that you can use to control the behavior of a Flexbox layout:
-display: flex - This property sets an element as a flex container, which creates a new flex context for its child elements.
-flex-direction - This property sets the direction of the flex container's main axis. We can set it to row for a horizontal layout, or column for a vertical layout.
-justify-content - This property aligns flex items along the main axis of the flex container. We can use values like flex-start, center, flex-end, space-between, and space-around.
-align-items - This property aligns flex items along the cross axis of the flex container. WE can use values like flex-start, center, flex-end, stretch, and baseline.
-flex-wrap - This property controls whether the flex items should wrap to a new row or column when they exceed the width or height of the flex container.
-flex-grow - This property specifies how much a flex item should grow relative to other items in the flex container. It's useful for creating flexible layouts that adjust to the available space.
-flex-shrink - This property specifies how much a flex item should shrink when the available space in the flex container is reduced. It's useful for preventing content from overflowing and maintaining the overall layout.