FlexBox-Layout

 


container

display

Enables flex for all children.

display: flex

 

display: inline-flex

 

flex-direction

Establishes the main axis.

flex-direction: row

 

flex-direction: row-reverse

 

flex-direction: column

 

flex-direction: column-reverse

 

flex-wrap

Wraps items if they can't all be made to fit on one line.

flex-wrap: nowrap

 

flex-wrap: wrap

 

flex-wrap: wrap-reverse

 

justify-content

Attempts to distribute extra space on the main axis.

justify-content: flex-start

 

justify-content: flex-end

 

justify-content: center

 

justify-content: space-between

 

justify-content: space-around

 

justify-content: space-evenly

 

align-items

Determines how items are laid out on the cross axis.

align-items: flex-start

 

align-items: flex-end

 

align-items: center

 

align-items: baseline

 

align-items: stretch

 

align-content

Only has an effect with more than one line of content. Examples shown here use flex-wrap.

align-content: flex-start

 

align-content: flex-end

 

align-content: center

 

align-content: space-between

 

align-content: space-around

 

align-content: stretch

children

order

Allows you to explictly set the order you want each child to appear in.

order: integer

 

flex-grow

Allows you to determine how each child is allowed to grow as a part of a whole.

flex-grow: 1 (applied to all)

flex-grow (1, 2, and 3)

 

flex-basis

Defines the size of an element before remaining space is distributed.

first item 20%, second item 40%

 

flex-shrink

Allows an item to shrink if necessary. Only really useful with a set size or flex-basis.

both want to be 100% wide, 2nd item has flex-shrink: 2

 

align-self

Sets alignment for individual item. See "align-items" for options

3rd item has align-self:flex-end

Comments

Popular posts from this blog

(gradle-2.13-all)-Exception in thread "main" java.lang.RuntimeException: java.io.IOException: Server returned HTTP response code: 403 for URL: http://services.gradle.org/distributions/gradle-2.13-all.zip

LetsLearn JavaScript

Cordova App for Publishing to an App Store - Steps by Steps (https://docs.microsoft.com/)