Scribd
Upload
12 views2 pages

CSS Flex

The document provides an overview of flexbox properties used in CSS for creating flexible layouts. Key properties include display: flex, flex-direction, flex-wrap, flex-grow, flex-shrink, flex-basis, and the shorthand flex. These properties work together to enable responsive design and layout management for web elements.

Uploaded by

henotech HD
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
12 views2 pages

CSS Flex

The document provides an overview of flexbox properties used in CSS for creating flexible layouts. Key properties include display: flex, flex-direction, flex-wrap, flex-grow, flex-shrink, flex-basis, and the shorthand flex. These properties work together to enable responsive design and layout management for web elements.

Uploaded by

henotech HD
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/ 2

Powered by AI

Copilot

Certainly! Let’s dive into the world of flexbox and explore these properties:

1. display: flex;:

This property transforms an element into a flex container. It allows its


children (flex items) to be laid out in a flexible row or column.
Example:
.parent {
display: flex;
}

2. flex-direction:

Determines the main axis along which flex items are arranged.
Values: row (default), row-reverse, column, column-reverse.
Example (vertical layout):
.parent {
display: flex;
flex-direction: column;
}

3. flex-wrap:

Controls whether flex items should wrap to the next line when they overflow
the container.
Values: nowrap (default), wrap, wrap-reverse.
Example (wrapping items):
.parent {
display: flex;
flex-wrap: wrap;
}

4. flex-grow:

Determines how much a flex item should grow relative to other items when
there’s extra space.
Default value: 0.
Example (one item grows more):
.child {
flex-grow: 1;
}
5. flex-shrink:

Specifies how much a flex item should shrink when there’s insufficient
space.
Default value: 1.
Example (one item shrinks more):
.child {
flex-shrink: 2;
}

6. flex-basis:

Sets the initial size of a flex item before any remaining space is distributed.
Default value: auto (uses item’s content size).
Example (fixed initial size):
.child {
flex-basis: 100px;
}

7. flex (shorthand):

Combines flex-grow, flex-shrink, and flex-basis into a single property.


Example (equivalent to previous examples):
.child {
flex: 1 2 100px;
}

Remember, flexbox simplifies layout, and these properties work together to create
flexible and responsive designs. 🎨🌟

For more in-depth understanding, check out CSS-Tricks’ guide on flexbox.

You might also like