0% found this document useful (0 votes)
2 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
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
2 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
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