WS WhereIsStuff
Tutorial Guides
Log In
Sign Up

Advertisement

Google Ad Slot: content-top

CSS Flex Items

~1 min read · CSS
On this page
❮ Previous Next ❯

Flex items in CSS are the child elements of a flex container.

order:

Specifies the order of the flex item within the container.

1
2
3
Example
1
2
3
Try it yourself

flex-grow:

Specifies how much the item will grow relative to other items, based on available space in the container.The value must be a number, default value is 0.

1
2
2
3
Example
1
2
2
3
Try it yourself

flex-shrink:

Specifies how much the item will shrink relative to other items if there isn’t enough space in the container.The value must be a number, default value is 1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Try it yourself

flex-basis:

Defines the initial size of the flex item before space is distributed according to flex-grow or flex-shrink.

  • Accepts values like px, %, auto, etc.
  • Default value: auto (size is based on content).
1
2
3
4
5
6
Example
1
2
3
4
5
6
Try it yourself

flex:

A shorthand for the three properties.flex-grow,flex-shrink,flex-basis

1
2
3
5
6
Example
1
2
3
5
6
Try it yourself

align-self:

Overrides the container's align-items property for a specific item.


Syntax:

align-items : auto | flex-start | flex-end | center | baseline | stretch;
1
2
3
5
6
Example
1
2
3
5
6
Try it yourself

❮ Previous Next ❯