Scribd
Upload
15 views

04 - Flex in CSS

Flexbox is a layout mode in CSS that allows efficient positioning and alignment of elements within a container. To use Flexbox, you define a container element and specify layout properties for its items, such as flex-direction to set the direction items are placed, justify-content to align items horizontally, and align-items to align them vertically. Other Flexbox properties control wrapping, sizing, and ordering of flex items.

Uploaded by

chandramoulibogala43
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

04 - Flex in CSS

Flexbox is a layout mode in CSS that allows efficient positioning and alignment of elements within a container. To use Flexbox, you define a container element and specify layout properties for its items, such as flex-direction to set the direction items are placed, justify-content to align items horizontally, and align-items to align them vertically. Other Flexbox properties control wrapping, sizing, and ordering of flex items.

Uploaded by

chandramoulibogala43
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Flexbox is a layout mode in CSS that provides a more efficient way to design and align items

within a container. With Flexbox, you can easily adjust the layout and positioning of elements,
regardless of their size or content.

To use Flexbox, you first need to define a container element, and then specify the layout and
alignment properties for the items within that container. Here are the main properties you can
use:

display: flex;

This property turns the container element into a flex container and enables the use of flex
properties.

Example:

Flex-direction:

This property specifies the direction in which the items within the container should be laid out. It
can take one of four values: row (default), row-reverse, column, or column-reverse.

Example:

justify-content:

This property aligns the items along the main axis (horizontal for row and row-reverse, and
vertical for column and column-reverse). It can take one of five values: flex-start (default),
flex-end, center, space-between, or space-around.
Example:

align-items:

This property aligns the items along the cross-axis (vertical for row and row-reverse, and
horizontal for column and column-reverse). It can take one of five values: stretch (default),
flex-start, flex-end, center, or baseline.

Example:

flex-wrap:

This property specifies whether the items should wrap to the next line when they exceed the
width or height of the container. It can take one of three values: nowrap (default), wrap, or
wrap-reverse.

Example:
Flex-flow:

This property is a shorthand for flex-direction and flex-wrap.

Example:

align-content:

This property aligns the lines of items when there is extra space in the cross-axis. It can take
one of six values: stretch (default), flex-start, flex-end, center, space-between, or space-around.

Example:

order:

This property specifies the order in which the items should be displayed within the container.
The default value is 0.

Example:
flex-grow:

This property specifies how much the item should grow relative to the other items in the
container. The default value is 0.

Example:

flex-shrink:

This property specifies how much the item should shrink relative to the other items in the
container. The default value is 1.

Example:

flex-basis:

This property specifies the initial size of the item before any remaining space is distributed. The
default value is auto.
Example:

flex:

This property is a shorthand for flex-grow, flex-shrink, and flex-basis.

Example:

You might also like