"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.getWebviewContent = void 0; const webviewUiToolkitHash = 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='; function getWebviewContent(cspSource, scriptPath, stylePath, imagesPath) { return /*html*/ ` CSS Flexbox Cheatsheet

CSS Flexbox Cheatsheet

Settings

Select the directionality to be used in the interactive playgrounds. (Learn more)

LTR (left-to-right) RTL (right-to-left)

Flex Container

Display

display: flex;
display: flex;
display: inline-flex;
display: inline-flex;

Flex flow (shorthand)

flex-flow: row nowrap; (flex-direction flex-wrap)

Flex direction

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

Try it out

dir="ltr"
One
Two
Three
Four

Flex wrap

flex-wrap: nowrap;
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;

Try it out

dir="ltr"
One
Two
Three
Four
Five
Six
Seven
Eight

Justify content

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

Try it out

dir="ltr"
One
Two
Three
Four

Align items

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

Try it out

dir="ltr"
One
Two
Three
Four

Align content

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

Try it out

dir="ltr"
One
Two
Three
Four
Five
Six
Seven
Eight

Flex Item

Order

order: 0;
order: 0;

Flex (shorthand)

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

Flex grow

flex-grow: 0;
flex-grow: 0;
flex-grow: 1;
flex-grow: 1;

Try it out

dir="ltr"
One
Two
Three
Four

Flex shrink

flex-shrink: 0;
flex-shrink: 0;
flex-shrink: 1;
flex-shrink: 1;

Flex basis

flex-basis: auto;

Align self

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

Try it out

dir="ltr"
One
Two
Three
Four
Five

Resources

`; } exports.getWebviewContent = getWebviewContent; //# sourceMappingURL=webviewContent.js.map