Deekshith's TOP Dashboard - Flexbox
Introduction
Flexbox, or the Flexible Box Layout, is a CSS layout model that allows you to design complex layouts more easily and efficiently. It provides a way to distribute space along a single row or column, making it easier to align and distribute items within a container.
With Flexbox, you can create responsive designs that adapt to different screen sizes and orientations. It offers powerful alignment and spacing options, allowing you to control the positioning of elements within a container with ease.
Some key features of Flexbox include:
- Flexible sizing: Flexbox allows items to grow or shrink based on available space, making it easier to create fluid layouts.
- Alignment: You can easily align items vertically and horizontally within a container using properties like justify-content and align-items.
- Order: Flexbox allows you to change the order of items within a container without changing the HTML structure.
- Direction: You can control the direction of items (row or column) using the flex-direction property.
Overall, Flexbox is a powerful tool for creating modern web layouts that are flexible, responsive, and easy to maintain.
Container & Flex Items
In Flexbox, a flex container is the parent element that contains flex items. The flex container is defined by setting the display property to flex or inline-flex on the parent element.
Flex items are the child elements within the flex container. These items can be any HTML element, such as divs, images, or text elements. Once an element is designated as a flex item, it gains access to various Flexbox properties that allow for flexible layout and alignment.
Here is an example of a simple flex container with three flex items:
The HTML code for the above example is as follows:
<style>
.flex-item
{
border:2px solid black;
background-color: #f9d5e5;
margin:0;
padding:0;
}
</style>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
In this example, the div with the class "flex-container" is the flex container, and the three divs with the class "flex-item" are the flex items.
By using Flexbox properties on the flex container and flex items, you can control the layout, alignment, and spacing of the items within the container.
Growing and Shrinking Flex Items
Flexbox allows flex items to grow or shrink based on the available space within the flex container. This is controlled using the flex-grow and flex-shrink properties.
The flex-grow property specifies how much a flex item should grow relative to the other items in the container when there is extra space available. A higher value means the item will take up more of the available space.
The flex-shrink property specifies how much a flex item should shrink relative to the other items in the container when there is not enough space available. A higher value means the item will shrink more when space is limited.
Here is an example demonstrating flex-grow and flex-shrink:
In this example, Item 2 will take up twice as much space as Item 1 and Item 3 when there is extra space available in the flex container.
By using the flex-grow and flex-shrink properties, you can create flexible layouts that adapt to different screen sizes and content requirements.
Common Flexbox Properties
Here are some common Flexbox properties that you can use to control the layout and alignment of flex items within a flex container:
- display: Defines a flex container. Example: display: flex;
- flex-direction: Specifies the direction of the flex items. Example: row, column;
- justify-content: Aligns flex items along the main axis. Example: flex-start, center, space-between;
- align-items: Aligns flex items along the cross axis. Example: stretch, center, flex-end;
- flex-wrap: Controls whether flex items wrap onto multiple lines. Example: nowrap, wrap;
- flex-flow: A shorthand property for flex-direction and flex-wrap.
- flex-grow: Specifies how much a flex item should grow relative to others.
- flex-shrink: Specifies how much a flex item should shrink relative to others.
- flex-basis: Defines the default size of a flex item before any growing or shrinking.
- order: Controls the order of flex items within the container.
- align-self: Allows individual flex items to override the align-items property.
- gap: Defines the space between flex items.
By using these properties, you can create complex and responsive layouts with ease using Flexbox.
Flexbox Axes
Understanding the main and cross axes is crucial for working with Flexbox:
- Main Axis: The primary axis along which flex items are laid out. It's determined by the flex-direction property.
- Cross Axis: The axis perpendicular to the main axis. It's also determined by the flex-direction property.