Scribd
Upload
16 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 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
We take content rights seriously. If you suspect this is your content, claim it here.
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