Skip to main content

CSS Flex Items

Child Elements (Items)​

The direct child elements of a flex container automatically becomes flexible (flex) items.

Example flexbox items

The element above represents four blue flex items inside a grey flex container.

<div class="flex-container">  
	<div>1</div>  
	<div>2</div>  
	<div>3</div>  
	<div>4</div>  
</div>

CSS Flexbox Items Properties​

The following table lists all the CSS Flexbox Items properties:

PropertyDescription
align-selfSpecifies the alignment for a flex item (overrides the flex container's align-items property)
flexA shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
flex-basisSpecifies the initial length of a flex item
flex-growSpecifies how much a flex item will grow relative to the rest of the flex items inside the same container
flex-shrinkSpecifies how much a flex item will shrink relative to the rest of the flex items inside the same container
orderSpecifies the order of the flex items inside the same container

order Property​

The order property specifies the order of the flex items.

Example flexbox items: order property

The first flex item in the code does not have to appear as the first item in the layout.

The order value must be a number, default value is 0.

Example: the order property can change the order of the flex items:

<div class="flex-container">  
	<div style="order: 3">1</div>  
	<div style="order: 2">2</div>  
	<div style="order: 4">3</div>  
	<div style="order: 1">4</div>  
</div>

flex-grow Property​

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

Example flexbox items: flex-grow property

The value must be a number, default value is 0.

Example: make the third flex item grow eight times faster than the other flex items:

<div class="flex-container">  
	<div style="flex-grow: 1">1</div>  
	<div style="flex-grow: 1">2</div>  
	<div style="flex-grow: 8">3</div>  
</div>

flex-shrink Property​

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.

Example flexbox items: flex-shrink property

The value must be a number, default value is 1.

Example: do not let the third flex item shrink as much as the other flex items:

<div class="flex-container">  
	<div>1</div>  
	<div>2</div>  
	<div style="flex-shrink: 0">3</div>  
	<div>4</div>  
	<div>5</div>  
	<div>6</div>  
	<div>7</div>  
	<div>8</div>  
	<div>9</div>  
	<div>10</div>  
</div>

flex-basis Property​

The flex-basis property specifies the initial length of a flex item.

Example flexbox items: flex-basis property

Example: set the initial length of the third flex item to 200 pixels:

<div class="flex-container">  
	<div>1</div>  
	<div>2</div>  
	<div style="flex-basis: 200px">3</div>  
	<div>4</div>  
</div>

flex Property​

The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

Example: make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:

<div class="flex-container">  
	<div>1</div>  
	<div>2</div>  
	<div style="flex: 0 0 200px">3</div>  
	<div>4</div>  
</div>

align-self Property​

The align-self property specifies the alignment for the selected item inside the flexible container.

The align-self property overrides the default alignment set by the container's align-items property.

Example flexbox items: align-self property

In these examples we use a 200 pixels high container, to better demonstrate the align-self property, in order to align the third flex item in the middle of the container:

<div class="flex-container">  
	<div>1</div>  
	<div>2</div>  
	<div style="align-self: center">3</div>  
	<div>4</div>  
</div>

Example: align the second flex item at the top of the container, and the third flex item at the bottom of the container:

<div class="flex-container">  
	<div>1</div>  
	<div style="align-self: flex-start">2</div>  
	<div style="align-self: flex-end">3</div>  
	<div>4</div>  
</div>

Table of Contents