├── README.md └── Новая папка ├── styles.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Mente-academy-6-ci-ders 2 | Flex-box 3 | -------------------------------------------------------------------------------- /Новая папка/styles.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | .container{ 5 | 6 | width:100%; 7 | 8 | background-color: chartreuse; 9 | display: flex; 10 | /* flex-direction: column; asagi salir */ 11 | /* flex-direction: column-reverse; asagi salir eksine duzur */ 12 | /* flex-direction: row yan yana getiri; 13 | flex-direction: row-reverse; yan yanan eksine cevirir */ 14 | /* flex-wrap: wrap; asagi salir sixilanda width */ 15 | /* flex-wrap: nowrap; asagi salmir sixilanda */ 16 | /* flex-wrap: wrap-reverse; asagi salir eksine duzur */ 17 | /* justify-content: center width istiqametide ortaya getirir; 18 | justify-content: end width istiqametide sona getirir; 19 | justify-content: flex-start width istiqametide evvele getirir; 20 | justify-content: space-between width istiqametide beraber bolur getirir; 21 | justify-content: space-around width istiqametide bolur yazib baxin r; 22 | justify-content: space-evenly;width istiqametide bolur arabosluq eyni olmaqla getirir */ 23 | /* align-items: center; heigth istiqametinde ortaya getiri */ 24 | /* align-items: flex-end; heigth istiqametinde sona getiri */ 25 | /* justify-content: center width istiqametinde ortaya getiri; 26 | align-items: center heigth istiqametinde ortaya getiri; 27 | ; 28 | align-items: flex-end; heigth istiqametinde sona getirir*/ 29 | flex-wrap: wrap; 30 | row-gap: 10px; 31 | column-gap: 10px; 32 | justify-content: space-between; 33 | } 34 | 35 | 36 | .bir{ 37 | flex-basis: 100px; /* dasmanin qarsini alir elastik edir */ 38 | flex-basis: 100px; 39 | background-color: chocolate; 40 | 41 | } 42 | .iki{ 43 | height: 100px; 44 | width: 100px; 45 | background-color: rgb(30, 105, 210); 46 | } 47 | .uc{ 48 | height: 100px; 49 | width: 100px; 50 | background-color: rgb(210, 30, 186); 51 | } -------------------------------------------------------------------------------- /Новая папка/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, repellendus!gekvmelkvmlkmvmekvmk
14 |
2
15 |
3
16 | 41 | 57 | 58 |
59 | 60 | 61 | --------------------------------------------------------------------------------