CSS FlexBox Help

CSS Flexbox Help

Switch modes

Toggle

About Flexbox

Flexbox, short form for “Flexible Box Layout” allows for the easy arrangement of certain items in one dimension, either in rows or columns. Learn more here

Box COUNT

Flexbox {Properties: Value;}

Flex-Direction

Flex Direction

"The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed)."

row (default)

row (reverse)

column

column (reverse)

Flex-Wrap

Flex Wrap

"The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked."

nowrap (default)

wrap

wrap-reverse

Justify-Content

Justify Content

"The CSS justify-content property defines how the browser distributes space between and around content items along the x-axis of a flex container, and the inline axis of a grid container."

flex-start (default)

flex-end (reverse)

center

space-around

space-evenly

space-between

Align-Items

Align Items

"The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Y Axis."

stretch (default)

baseline (reverse)

center

flex-start

flex-end

Align-Content

Align Content

"The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis"

stretch (default)

center

flex-start

flex-end

space-around

space-evenly

space-between

CSS Output

Css Output Styles

After selecting the right radio button kindly click on the copy button and it will copy the styles to your clipboard Then, paste it on your stylesheet with the apporiate tag to select the html / JSX / other. tag / class / id

.yourClassName then paste the style sample


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

CSS Flexbox Rules

Designed and built with all the love in the world by George and Peace

Code Licensed Under GPL V2 Currently V1.9.x

More Project Coming Soon ;)

Credit: Taylersumms

About Flexbox

Box COUNT

Flexbox {Properties: Value;}

Flex-Direction Flex Direction "The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed)." Read More

Flex-Wrap Flex Wrap "The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked." Read More

Justify-Content Justify Content "The CSS justify-content property defines how the browser distributes space between and around content items along the x-axis of a flex container, and the inline axis of a grid container." Read More

Align-Items Align Items "The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Y Axis." Read More

Align-Content Align Content "The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis" Read More

CSS Output

Flex-Direction

Flex Direction

"The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed)."

Flex-Wrap

Flex Wrap

"The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked."

Justify-Content

Justify Content

"The CSS justify-content property defines how the browser distributes space between and around content items along the x-axis of a flex container, and the inline axis of a grid container."

Align-Items

Align Items

"The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Y Axis."

Align-Content

Align Content

"The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis"