CSS Flexbox Tutorial

When constructing a house, a blueprint acts as a crucial guide. Similarly, in the realm of web development, we require a blueprint to achieve well-organized websites. Enter Flexbox – the ultimate blueprint for web layouts. The Flexbox model not only simplifies the arrangement of website content but also enables us to establish structures that adapt flawlessly to diverse devices, ensuring responsive designs. With Flexbox, crafting visually appealing and user-friendly websites becomes a seamless process, guaranteeing an optimal browsing experience across various screen sizes.

Flex Property	Values	Description	Example Usage
display: flex;	flex	Sets the element as a flex container, enabling flex properties on its child elements.	`<div style="display: flex;">...`
justify-content	flex-start, flex-end, center, space-between, space-around	Specifies how flex items are distributed along the main axis of the flex container. `flex-start`: Items are aligned at the start of the container. `flex-end`: Items are aligned at the end of the container. `center`: Items are centered within the container. `space-between`: Items are evenly distributed with space between them. `space-around`: Items are evenly distributed with space around them.	`<div style="justify-content: flex-start;">...`
align-items	flex-start, flex-end, center, baseline, stretch	Specifies how flex items are aligned along the cross axis of the flex container. `flex-start`: Items are aligned at the start of the cross axis. `flex-end`: Items are aligned at the end of the cross axis. `center`: Items are centered along the cross axis. `baseline`: Items are aligned based on their text baseline. `stretch`: Items are stretched to fill the container along the cross axis.	`<div style="align-items: flex-start;">...`
flex-direction	row, row-reverse, column, column-reverse	Specifies the direction of the main axis and cross axis within the flex container. `row`: Items are laid out horizontally in the order they appear. `row-reverse`: Items are laid out horizontally in reverse order. `column`: Items are laid out vertically in the order they appear. `column-reverse`: Items are laid out vertically in reverse order.	`<div style="flex-direction: row;">...`
flex-wrap	nowrap, wrap, wrap-reverse	Specifies whether flex items should wrap or stay on a single line. `nowrap`: Items are forced to stay on a single line. `wrap`: Items wrap onto multiple lines if necessary. `wrap-reverse`: Items wrap onto multiple lines in reverse order.	`<div style="flex-wrap: nowrap;">...`
flex-grow	number	Specifies the ability for a flex item to grow if necessary within the flex container.	`<div style="flex-grow: 1;">...`
flex-shrink	number	Specifies the ability for a flex item to shrink if necessary within the flex container.	`<div style="flex-shrink: 1;">...`
flex-basis	length, auto	Specifies the initial size of a flex item before any remaining space is distributed. `length`: Specifies a fixed length for the flex item. `auto`: The default size of the flex item based on its content.	`<div style="flex-basis: 100px;">...`

align-self `flex-start`, `flex-end`, `center`, `stretch`, and `baseline` The `align-self` property in CSS is used in Flexbox to individually control the alignment of a specific flex item within its container along the cross-axis. It has values like `flex-start`, `flex-end`, `center`, `stretch`, and `baseline`, providing flexibility to customize item alignment independently. <div style="align-self: flex-start;">...

order

takes a number/integer. Lower numbers appear first in the container, then bigger numbers appear last

The Flexbox order property in CSS is used to modify the visual order in which flex items are displayed within their flex container. By default, flex items are laid out in the order they appear in the source code. However, the order property allows you to change this visual order without altering the source order.

The order property accepts integer values, and the flex items are displayed in ascending numerical order. A lower value of order brings the flex item closer to the beginning of the container, while a higher value pushes it towards the end. Any non-negative integer can be used, and negative values are also allowed.

Here’s a brief summary of how order works:

Default value: order: 0; (flex items appear in source order).
Negative values: Flex items with negative order values appear first in the container.
Positive values: Flex items with positive order values appear later in the container.

<div style="order: 1;">...

CSS Flexbox Tutorial

Related