├── css ├── flexWrap.css ├── flexDirection.css ├── alignSelf.css ├── order.css ├── alignContent.css ├── flexBasis.css ├── flexGrow.css ├── alignItems.css ├── justifyContent.css ├── flexShrink.css ├── index.css └── boilerplate.css ├── README.md ├── flexGrow.html ├── flexShrink.html ├── order.html ├── flexDirection.html ├── flexWrap.html ├── alignSelf.html ├── flexBasis.html ├── alignItems.html ├── index.html ├── justifyContent.html ├── alignContent.html └── assests └── favion.svg /css/flexWrap.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #ff9d76; 3 | } 4 | 5 | .flex-container { 6 | flex-direction: row; 7 | } 8 | 9 | .nowrap { 10 | flex-wrap: nowrap; 11 | } 12 | 13 | .wrap { 14 | flex-wrap: wrap; 15 | } 16 | 17 | .wrap-reverse { 18 | flex-wrap: wrap-reverse; 19 | } 20 | -------------------------------------------------------------------------------- /css/flexDirection.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #9ad3bc; 3 | } 4 | 5 | .flex-container { 6 | display: flex; 7 | color: white; 8 | } 9 | 10 | .row { 11 | flex-direction: row; 12 | } 13 | 14 | .row-reverse { 15 | flex-direction: row-reverse; 16 | } 17 | 18 | .column { 19 | flex-direction: column; 20 | } 21 | 22 | .column-reverse { 23 | flex-direction: column-reverse; 24 | } 25 | -------------------------------------------------------------------------------- /css/alignSelf.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fe6845; 3 | } 4 | 5 | .flex-container { 6 | flex-direction: row; 7 | height: 240px; 8 | align-items: flex-start; 9 | } 10 | .sample1 div:nth-child(2) { 11 | align-self: flex-start; 12 | } 13 | 14 | .sample2 div:nth-child(2) { 15 | align-self: flex-end; 16 | } 17 | 18 | .sample3 div:nth-child(2) { 19 | align-self: center; 20 | } 21 | 22 | .sample4 div:nth-child(2) { 23 | align-self: stretch; 24 | } 25 | -------------------------------------------------------------------------------- /css/order.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #617be3; 3 | } 4 | 5 | .flex-container { 6 | flex-flow: row wrap; 7 | } 8 | 9 | /* Seclecting All the Children of Sample1 class */ 10 | .sample1 > * { 11 | order: 0; 12 | } 13 | 14 | .sample2 div:nth-child(2) { 15 | order: 1; 16 | } 17 | 18 | .sample2 div:nth-child(4) { 19 | order: -1; 20 | } 21 | 22 | .sample3 div:nth-child(1) { 23 | order: 1; 24 | } 25 | 26 | .sample3 div:nth-child(2) { 27 | order: 2; 28 | } 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Flexbox-Cheatsheet 2 | This is a Flexbox cheatsheet, made using CSS Flexbox. 3 | 4 | ![Cheatsheet](https://user-images.githubusercontent.com/56041735/112986933-c4967180-917f-11eb-9b9a-c578128eb464.PNG) 5 | 6 | 7 | ## Tech Stack 8 | 9 | HTML5 10 | CSS3 -------------------------------------------------------------------------------- /css/alignContent.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #50d890; 3 | } 4 | 5 | .flex-container { 6 | height: 280px; 7 | flex-direction: row; 8 | align-items: flex-start; 9 | flex-wrap: wrap; 10 | } 11 | 12 | .start { 13 | align-content: flex-start; 14 | } 15 | 16 | .end { 17 | align-content: flex-end; 18 | } 19 | 20 | .center { 21 | align-content: center; 22 | } 23 | .space-between { 24 | align-content: space-between; 25 | } 26 | 27 | .space-around { 28 | align-content: space-around; 29 | } 30 | -------------------------------------------------------------------------------- /css/flexBasis.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #1a2849; 3 | } 4 | 5 | .flex-container { 6 | flex-direction: row; 7 | justify-content: flex-start; 8 | } 9 | 10 | .sample1 div:nth-child(2) { 11 | flex-basis: 200px; 12 | } 13 | 14 | .sample2 div:nth-child(2) { 15 | flex-basis: 33%; 16 | } 17 | 18 | /* .sample3 > * { 19 | flex-grow: 1; 20 | } */ 21 | .sample3 > * { 22 | flex-basis: 25%; 23 | } 24 | 25 | .sample4 > * { 26 | flex: 0 1 auto; 27 | } 28 | 29 | .sample5 > * { 30 | flex: 1 1 25%; 31 | } 32 | -------------------------------------------------------------------------------- /css/flexGrow.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #6fb98f; 3 | } 4 | 5 | .head-container { 6 | display: flex; 7 | flex-direction: column; 8 | align-items: center; 9 | } 10 | 11 | .flex-container { 12 | flex-direction: row; 13 | align-items: flex-start; 14 | width: 600px; 15 | } 16 | 17 | .sample1 > * { 18 | flex-grow: 0; 19 | } 20 | 21 | .sample2 > * { 22 | flex-grow: 1; 23 | } 24 | 25 | .sample3 :nth-child(2) { 26 | flex-grow: 1; 27 | } 28 | 29 | .sample3 :nth-child(3) { 30 | flex-grow: 2; 31 | } 32 | -------------------------------------------------------------------------------- /css/alignItems.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #d89cf6; 3 | } 4 | 5 | .flex-container { 6 | height: 200px; 7 | } 8 | 9 | .start { 10 | align-items: flex-start; 11 | } 12 | 13 | .end { 14 | align-items: flex-end; 15 | } 16 | 17 | .center { 18 | align-items: center; 19 | } 20 | 21 | .baseline { 22 | align-items: baseline; 23 | } 24 | .baseline div:nth-child(2) { 25 | font-size: 16px; 26 | } 27 | .baseline div:nth-child(4) { 28 | font-size: 36px; 29 | } 30 | 31 | .stretch { 32 | align-items: stretch; 33 | } 34 | -------------------------------------------------------------------------------- /css/justifyContent.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #9ad3bc; 3 | } 4 | 5 | .flex-container { 6 | flex-direction: row; 7 | } 8 | 9 | .start { 10 | justify-content: flex-start; 11 | } 12 | 13 | .end { 14 | justify-content: flex-end; 15 | } 16 | 17 | .center { 18 | justify-content: center; 19 | } 20 | 21 | .space-around { 22 | justify-content: space-around; 23 | } 24 | .space-between { 25 | justify-content: space-between; 26 | } 27 | 28 | .column-center { 29 | justify-content: space-between; 30 | flex-direction: column; 31 | height: 500px; 32 | } 33 | -------------------------------------------------------------------------------- /css/flexShrink.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #3fc5f0; 3 | } 4 | 5 | .head-container { 6 | display: flex; 7 | flex-direction: column; 8 | align-items: center; 9 | } 10 | 11 | .flex-container { 12 | flex-direction: row; 13 | justify-content: flex-start; 14 | width: 600px; 15 | } 16 | 17 | .flex-container > * { 18 | width: 250px; 19 | } 20 | 21 | .sample1 > * { 22 | flex-shrink: 1; 23 | } 24 | 25 | .sample2 div:nth-child(2) { 26 | flex-shrink: 0; 27 | } 28 | 29 | .sample3 div:nth-child(2) { 30 | flex-shrink: 2; 31 | } 32 | 33 | .sample3 div:nth-child(3) { 34 | flex-shrink: 3; 35 | } 36 | -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-flow: row wrap; 4 | } 5 | 6 | .container > * { 7 | color: #fff; 8 | background-color: #d44000d7; 9 | border: 1px solid #fff; 10 | padding: 20px; 11 | margin: 5px; 12 | justify-content: space-between; 13 | text-align: center; 14 | min-width: 250px; 15 | flex-grow: 1; 16 | align-content: space-between; 17 | } 18 | 19 | .container > *:hover { 20 | background-color: #ff7a00; 21 | } 22 | 23 | a { 24 | text-decoration: none; 25 | color: #fff; 26 | } 27 | 28 | /* */ 29 | .ml6 { 30 | position: relative; 31 | font-weight: 900; 32 | font-size: 3em; 33 | text-align: center; 34 | padding-top: 0; 35 | color: orangered; 36 | margin: 0; 37 | } 38 | 39 | .ml6 .text-wrapper { 40 | position: relative; 41 | display: inline-block; 42 | /* padding-top: 0.2em; 43 | padding-right: 0.05em; 44 | padding-bottom: 0.1em; */ 45 | overflow: hidden; 46 | } 47 | 48 | .ml6 .letter { 49 | display: inline-block; 50 | line-height: 1em; 51 | } 52 | -------------------------------------------------------------------------------- /flexGrow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex-direction 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Flex With Flexbox

18 |

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex 19 | items.

20 |
21 | 22 |
23 |

All items have flex grow 0

24 |
25 |
Item 1
26 |
Item 2
27 |
Item 3
28 |
29 |
30 | 31 |
32 |

All items have flex grow 1

33 |
34 |
Item 1
35 |
Item 2
36 |
Item 3
37 |
38 |
39 | 40 | 41 |
42 |

Item 2 and item 3 have grow in a ratio 1:2

43 |
44 |
Item 1
45 |
Item 2
46 |
Item 3
47 |
48 |
49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /flexShrink.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex-direction 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Flex With Flexbox

18 |

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex 19 | items. 20 |

21 |
22 | 23 |
24 |

All items have flex shrink 1 (default)

25 |
26 |
Item 1
27 |
Item 2
28 |
Item 3
29 |
30 |
31 | 32 |
33 |

Don not let item 2 shrink

34 |
35 |
Item 1
36 |
Item 2
37 |
Item 3
38 |
39 |
40 | 41 |
42 |

Item 2 is allowed to shrink more then 1, and 3 is allowed to shrink more then 2

43 |
44 |
Item 1
45 |
Item 2
46 |
Item 3
47 |
48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /order.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex-direction 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Flex With Flexbox

18 |

The order property specifies the order of the flex items.

19 |

All the items have by default order 0

20 |
21 | 22 |
23 |

all items have order 0

24 |
25 |
Item 1
26 |
Item 2
27 |
Item 3
28 |
Item 4
29 |
Item 5
30 |
31 |
32 | 33 |
34 |

Item 2 has order 1 & item 4 has order -1

35 |
36 |
Item 1
37 |
Item 2
38 |
Item 3
39 |
Item 4
40 |
Item 5
41 |
42 |
43 | 44 |
45 |

Item 1 has order 1 & item 2 has order 2

46 |
47 |
Item 1
48 |
Item 2
49 |
Item 3
50 |
Item 4
51 |
Item 5
52 |
53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /flexDirection.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flex-direction 7 | 8 | 9 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Flex With Flexbox

20 |

21 | The flex-direction property defines in which direction the 22 | container wants to stack the flex items. 23 |

24 |
25 | 26 |
27 |

flex-direction: row

28 |
29 |
Item 1
30 |
Item 2
31 |
Item 3
32 |
Item 4
33 |
Item 5
34 |
35 |
36 | 37 |
38 |

flex-direction: row-reverse

39 |
40 |
Item 1
41 |
Item 2
42 |
Item 3
43 |
Item 4
44 |
Item 5
45 |
46 |
47 | 48 |
49 |

flex-direction: column

50 |
51 |
Item 1
52 |
Item 2
53 |
Item 3
54 |
Item 4
55 |
Item 5
56 |
57 |
58 | 59 |
60 |

flex-direction: column-reverse

61 |
62 |
Item 1
63 |
Item 2
64 |
Item 3
65 |
Item 4
66 |
Item 5
67 |
68 |
69 | 70 | 71 | -------------------------------------------------------------------------------- /flexWrap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flex-wrap 7 | 8 | 9 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Flex With Flexbox

20 |

21 | The flex-wrap property specifies whether the flex items should 22 | wrap or not. 23 |

24 |
25 | 26 |
27 |

flex-wrap: nowrap

28 |
29 |
Item 0
30 |
Item 1
31 |
Item 2
32 |
Item 3
33 |
Item 4
34 |
Item 5
35 |
Item 6
36 |
Item 7
37 |
Item 8
38 |
Item 9
39 |
40 |
41 | 42 |
43 |

flex-wrap: wrap

44 |
45 |
Item 0
46 |
Item 1
47 |
Item 2
48 |
Item 3
49 |
Item 4
50 |
Item 5
51 |
Item 6
52 |
Item 7
53 |
Item 8
54 |
Item 9
55 |
56 |
57 | 58 |
59 |

flex-wrap: wrap-reverse

60 |
61 |
Item 0
62 |
Item 1
63 |
Item 2
64 |
Item 3
65 |
Item 4
66 |
Item 5
67 |
Item 6
68 |
Item 7
69 |
Item 8
70 |
Item 9
71 |
72 |
73 | 74 | 75 | -------------------------------------------------------------------------------- /alignSelf.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex-direction 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Flex With Flexbox

18 |

The align-self property specifies the alignment for the selected item inside the flexible 19 | container. 20 |

21 |

The align-self property overrides the default alignment set by the container's align-items property. 22 |

23 |
24 | 25 |
26 |

Item 2 is aligned "flex-start"

27 |
28 |
Item 1
29 |
Item 2
30 |
Item 3
31 |
Item 4
32 |
Item 5
33 |
34 |
35 | 36 | 37 |
38 |

Item 2 is aligned "flex-end"

39 |
40 |
Item 1
41 |
Item 2
42 |
Item 3
43 |
Item 4
44 |
Item 5
45 |
46 |
47 | 48 | 49 |
50 |

Item 2 is aligned "center"

51 |
52 |
Item 1
53 |
Item 2
54 |
Item 3
55 |
Item 4
56 |
Item 5
57 |
58 |
59 | 60 |
61 |

Item 2 is aligned "stretch"

62 |
63 |
Item 1
64 |
Item 2
65 |
Item 3
66 |
Item 4
67 |
Item 5
68 |
69 |
70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /flexBasis.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex-direction 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Flex With Flexbox

18 |

The flex-basis property specifies the initial length of a flex item

19 |
20 | 21 |
22 |

Item 2 has width of 200px. flex-basis: 200px;

23 |
24 |
Item 1
25 |
Item 2
26 |
Item 3
27 |
28 |
29 | 30 |
31 |

Item 2 has flex-basis 33%;

32 |
33 |
Item 1
34 |
Item 2
35 |
Item 3
36 |
37 |
38 | 39 | 40 |
41 |

Items are intialize with flex-basis of 25%;

42 |
43 |
Item 1
44 |
Item 2
45 |
Item 3
46 |
Item 4
47 |
48 |
49 | 50 |
51 | 52 |
53 |

The 'Flex' Property

54 |

The flex property is a shorthand property for the flex-grow ,flex-shrink, and flex- basis property

55 |
56 | 57 |
58 |

Everything default - flex: 0 1 auto

59 |
60 |
Item 1
61 |
Item 2
62 |
Item 3
63 |
64 |
65 | 66 | 67 |
68 |

flex : 1 1 25%

69 |
70 |
Item 1
71 |
Item 2
72 |
Item 3
73 |
74 |
75 | 76 | 77 | -------------------------------------------------------------------------------- /alignItems.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Align-items 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Flex With Flexbox

18 |

The align-items property is used to align the flex items along cross-axis.

19 |
20 | 21 |
22 |

align-items: flex-start

23 |
24 |
Item 1
25 |
Item 2
26 |
Item 3
27 |
Item 4
28 |
Item 5
29 |
30 |
31 | 32 |
33 |

align-items: flex-end

34 |
35 |
Item 1
36 |
Item 2
37 |
Item 3
38 |
Item 4
39 |
Item 5
40 |
41 |
42 | 43 |
44 |

align-items: center

45 |
46 |
Item 1
47 |
Item 2
48 |
Item 3
49 |
Item 4
50 |
Item 5
51 |
52 |
53 | 54 |
55 |

align-items: baseline

56 |
57 |
Item 1
58 |
Item 2
59 |
Item 3
60 |
Item 4
61 |
Item 5
62 |
63 |
64 | 65 |
66 |

align-items: stretch

67 |
68 |
Item 1
69 |
Item 2
70 |
Item 3
71 |
Item 4
72 |
Item 5
73 |
74 |
75 | 76 | 77 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbox Cheatsheet 7 | 8 | 9 | 13 | 14 | 15 | 16 | 17 | 18 |

19 | 20 | Flexbox Cheatsheet 21 | 22 |

23 | 24 |
25 |
26 |

Parent Element - Flex Container

27 | 28 |
29 | Flex Direction 30 | Justify Content 31 | Align Items 32 |
33 |
34 | Flex Wrap 35 | Align Content 36 |
37 |
38 | 39 |
40 |

Child Elements - Flex Items

41 | 42 |
43 | Order 44 | Align Self 45 | Flex Grow 46 | Flex Shrink 47 | Flex Basis 48 |
49 |
50 |
51 | 52 | 53 | 54 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /justifyContent.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex-direction 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Flex With Flexbox

18 |

The justify-content property is used to align the flex items along main axis

19 |
20 | 21 |
22 |

justify-content: flex-start

23 |
24 |
Item 1
25 |
Item 2
26 |
Item 3
27 |
Item 4
28 |
Item 5
29 |
30 |
31 |
32 |

justify-content: flex-end

33 |
34 |
Item 1
35 |
Item 2
36 |
Item 3
37 |
Item 4
38 |
Item 5
39 |
40 |
41 |
42 |

justify-content: center

43 |
44 |
Item 1
45 |
Item 2
46 |
Item 3
47 |
Item 4
48 |
Item 5
49 |
50 |
51 |
52 |

justify-content :space-around

53 |
54 |
Item 1
55 |
Item 2
56 |
Item 3
57 |
Item 4
58 |
Item 5
59 |
60 |
61 |
62 |

justify-content: space-between

63 |
64 |
Item 1
65 |
Item 2
66 |
Item 3
67 |
Item 4
68 |
Item 5
69 |
70 |
71 |
72 |

justify-content: space-between (direction :column)

73 |
74 |
Item 1
75 |
Item 2
76 |
Item 3
77 |
Item 4
78 |
Item 5
79 |
80 |
81 | 82 | 83 | -------------------------------------------------------------------------------- /css/boilerplate.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | /* background-color: #9ad3bc; */ 7 | min-height: 90vh; 8 | overflow-x: hidden; 9 | font-family: "Josefin Sans"; 10 | font-size: 22px; 11 | color: rgb(29, 3, 3); 12 | padding: 40px; 13 | background-color: #ffaa00; 14 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb100' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffb800' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffbf00' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffc500' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23ffcc00' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffd624' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe038' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffeb49' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23fff558' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23ffff66' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E"); 15 | background-attachment: fixed; 16 | background-size: cover; 17 | } 18 | 19 | .header > h1, 20 | p { 21 | margin: 25px 0 25px; 22 | text-align: center; 23 | } 24 | 25 | .head-container { 26 | border: 1px dotted #fff; 27 | padding: 20px 10px 20px 10px; 28 | margin: 40px 0 40px; 29 | background-color: #f1dd81de; 30 | } 31 | 32 | .flex-container { 33 | border: 1px solid #fff; 34 | padding: 10px; 35 | color: white; 36 | display: flex; 37 | background-color: #f84d09; 38 | } 39 | 40 | .flex-container > * { 41 | border: 1px solid #fff; 42 | /* background-color: rgba(255, 255, 255, 0.24); */ 43 | background-color: #3b0806; 44 | padding: 20px 10px 20px 10px; 45 | margin: 5px; 46 | } 47 | 48 | .flex-container > *:hover { 49 | background-color: rgba(255, 255, 255, 0.44); 50 | } 51 | 52 | .text-center { 53 | text-align: center; 54 | } 55 | -------------------------------------------------------------------------------- /alignContent.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Align-content 7 | 8 | 9 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Flex With Flexbox

20 |

The align-content property is used to align the flex lines.

21 |
22 | 23 |
24 |

align-content: flex-start

25 |
26 |
Item 0
27 |
Item 1
28 |
Item 2
29 |
Item 3
30 |
Item 4
31 |
Item 5
32 |
Item 6
33 |
Item 7
34 |
Item 8
35 |
Item 9
36 |
37 |
38 | 39 |
40 |

align-content: flex-end

41 |
42 |
Item 0
43 |
Item 1
44 |
Item 2
45 |
Item 3
46 |
Item 4
47 |
Item 5
48 |
Item 6
49 |
Item 7
50 |
Item 8
51 |
Item 9
52 |
53 |
54 | 55 |
56 |

align-content: center

57 |
58 |
Item 0
59 |
Item 1
60 |
Item 2
61 |
Item 3
62 |
Item 4
63 |
Item 5
64 |
Item 6
65 |
Item 7
66 |
Item 8
67 |
Item 9
68 |
69 |
70 | 71 |
72 |

align-content: space-around

73 |
74 |
Item 0
75 |
Item 1
76 |
Item 2
77 |
Item 3
78 |
Item 4
79 |
Item 5
80 |
Item 6
81 |
Item 7
82 |
Item 8
83 |
Item 9
84 |
85 |
86 | 87 |
88 |

align-content: space-between

89 |
90 |
Item 0
91 |
Item 1
92 |
Item 2
93 |
Item 3
94 |
Item 4
95 |
Item 5
96 |
Item 6
97 |
Item 7
98 |
Item 8
99 |
Item 9
100 |
101 |
102 | 103 | 104 | -------------------------------------------------------------------------------- /assests/favion.svg: -------------------------------------------------------------------------------- 1 | voice interface --------------------------------------------------------------------------------