Super Flexbox

Children Properties

align-self

.container {

...

display: flex;

flex-wrap: nowrap;

flex-direction: row;

justify-content: flex-start;

}

.block-1 { ... }

.block-2 { ... }

.block-3 { ... }

.block-4 { ... ; }

.block-5 { ... }

1
2
3
4
5
align-self

Override the align-items property for one or more children.

order

.container {

...

display: flex;

flex-wrap: nowrap;

flex-direction: row;

justify-content: flex-start;

}

.block-1 { ... order: 1; }

.block-2 { ... order: 2; }

.block-3 { ... order: 0; }

.block-5 { ... order: 3; }

.block-4 { ... ; } // default is 0

1
2
3
4
5
order

Change the order of single elements, this property assigns the items to groups, and sor them in an ascending order.

flex-grow

.container {

...

display: flex;

flex-wrap: nowrap;

flex-direction: row;

justify-content: flex-start;

}

.block-1 { ... ; }

.block-2 { ... ; }

.block-3 { ... ; }

.block-4 { ... ; }

.block-5 { ... ; }

// flex-grow default is 0

1
2
3
4
5
flex-grow

Allows an item to grow if there's enough space.

flex-shrink

.container {

...

display: flex;

flex-wrap: nowrap;

flex-direction: row;

justify-content: flex-start;

}

.block-1 { ... ; }

.block-2 { ... ; }

.block-3 { ... ; }

.block-4 { ... ; }

.block-5 { ... ; }

// flex-basis is set 100px

1
2
3
4
5
flex-shrink

Allows an item to shrink.

flex-basis

.container {

...

display: flex;

flex-wrap: nowrap;

flex-direction: row;

justify-content: flex-start;

}

.block-1 { ... ; }

.block-2 { ... ; }

.block-3 { ... ; }

.block-4 { ... ; }

.block-5 { ... ; }

1
2
3
4
5
flex-basis

Defines de thefault size of the children.