Scribd
Upload
56 views1 page

Css Flex

This document outlines CSS flex properties for controlling the layout of flex items including flex-direction to set the main axis, flex-wrap to enable wrapping of items, flex-flow for setting direction and wrapping, align-items and align-self for aligning items, align-content for multi-line alignment, and justify-content for aligning items along the main axis.

Uploaded by

sailormunelune
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
56 views1 page

Css Flex

This document outlines CSS flex properties for controlling the layout of flex items including flex-direction to set the main axis, flex-wrap to enable wrapping of items, flex-flow for setting direction and wrapping, align-items and align-self for aligning items, align-content for multi-line alignment, and justify-content for aligning items along the main axis.

Uploaded by

sailormunelune
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

CSS FLEX DISPLAY

display:flex;

CSS FLEX DIRECTION


flex-direction:row;
or
flex-direction:column;
or
flex-direction:row-reverse;
or
flex-direction:column-reverse;

CSS FLEX WRAP


flex-wrap: wrap;
or
flex-wrap:nowrap;

CSS FLEX FLOW


flex-flow: (row, row-reverse, column, column-reverse) (wrap, no wrap);

CSS FLEX ALIGN GROUP


align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;
align-items: baseline;

CSS FLEX ALIGN SINGLE


align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;
align-self: baseline;

CSS FLEX ALIGN CROSS-AXIS


align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
align-content: stretch

CSS FLEX JUSTIFY MAIN-AXIS


justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around

You might also like