Scribd
Upload
5 views

flexbox-cheatsheet -css

The document outlines various CSS properties related to Flexbox layout for both flex containers and flex items. It includes properties such as display, align-items, flex-flow, flex-direction, and justify-content, along with their possible values. The information serves as a reference for styling elements using Flexbox in web design.

Uploaded by

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

flexbox-cheatsheet -css

The document outlines various CSS properties related to Flexbox layout for both flex containers and flex items. It includes properties such as display, align-items, flex-flow, flex-direction, and justify-content, along with their possible values. The information serves as a reference for styling elements using Flexbox in web design.

Uploaded by

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

Flex Container Flex Item

display: flex; align-items: stretch; order: 0;

display: inline-flex; align-items: flex-start;


flex: 0 1 auto; (flex-grow flex-shrink flex-basis)

align-items: center;
flex-flow: row nowrap; (flex-direction flex-wrap)
flex-grow: 0;

align-items: flex-end;
flex-direction: row; flex-grow: 1;

align-items: baseline;
flex-direction: row-reverse;
flex-shrink: 0;

align-content: stretch;
flex-direction: column;
flex-shrink: 1;

align-content: flex-start;
flex-direction: column-reverse;
flex-basis: auto;
align-content: center;
flex-wrap: nowrap;
align-self: auto;
align-content: flex-end;
flex-wrap: wrap;
align-self: flex-start;
align-content: space-between;
flex-wrap: wrap-reverse;
align-self: center;
align-content: space-around;
justify-content: flex-start;
align-self: flex-end;
place-content: center start;
justify-content: center; (align-content justify-content)
align-self: baseline;

justify-content: flex-end;
align-self: stretch;

justify-content: space-between;

justify-content: space-around;

You might also like