CSS Flexible Box Layout

The layout for the flexbox:

Flexbox layout

Syntax:

The CSS rule for the flex container – the parent of the flex items:

.flex-container {
    display: flex | inline-flex;
}

CSS properties used with the flex container:

Property Initial value
flex-direction row Use to set items on desirable axis and direction (normal or reversed).
justify-content flex-start Use to align items on the main axis.
align-items stretch Use to align items on the cross axis.
flex-wrap nowrap Use to force items onto one line or to wrap onto multiple line.
align-content stretch Use to set the distribiution of space between and around items along a flexbox’s corss axis.

Examples for default values of CSS flexbox properties:

.flex-container {
    display: -webkit-flex;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
}

Example 1

.flex-container-1 {
	width:75%;
}
.flex-container-1 .flex-item {
	width:200px;
	height:100px;
	margin:1em;
}

The size of flex items adapts to the size of their parent.

1
2
3
4

Example 2

The combined size of flex items is bigger than the size of their parent. The size of flex items shrinks accordingly to match their parent. In this example width of the every flex item is equal 93px.

.flex-container-2 {
	width:500px;
}
.flex-container-2 .flex-item {
	width:200px;
	height:100px;
	margin:1em;
}
1
2
3
4

The CSS properties used with flex items

Property Initial value
order 0
align-self auto
flex-basis auto
flex-grow 0
flex-shrink 1

The CSS properties used with the flex container:

flex-direction

Use to set items on desirable axis and direction (normal or reversed).

Values:

row | row-reverse | column | column-reverse

row
Flex direction row

row-reverse
Flex direction row reverse

column
Flex direction column

column-reverse
Flex direction column reverse

justify-content

Use to align items on the main axis (horizontally – if direction is set on row).

justify-content property is applied to the flex-items after margins and flex-grow values are calculated. If any flex-item has flex-grow property grater than 0 or has an auto margin on the main axis justify-content has no effect.

flex-start (default)

Flex direction row and justify content flex-start

flex-end

Flex justify content - flex end

center

Flex justify content - center

space-between

Flex justify content - space between

space-around

Flex justify content - space around

align-items

Use to align items on the cross axis (vertically – if direction is set on row).

stretch (default)

Flex align items - stretch

flex-start

Flex align items - flex start

flex-end

Flex align items - flex end

center

Flex aling items - center

baseline

Flex align items - baseline

flex-wrap

Use to force items onto one line or to wrap onto multiple line.

nowrap (default)

Flex wrap - nowrap

wrap

Flex wrap - wrap

wrap-reverse

Flex wrap - wrap reverse

align-content

Use to set the distribiuton of space between and around items along a flexbox’s corss axis.

stretch (default)

Flex align content - stretch

flex-start

Flex align content - flex start

flex-end

Flex align content - flex end.

center

Flex align content - center

space-between

Flex align content - space between

space-around

Flex align content - space around

The shorthand

The flex-flow CSS property is a shorthand property for: flex-direction and flex-wrap

flex-flow: flex-direction flex-wrap

Resource

Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.