├── README.md ├── example ├── base.css ├── flex.html └── grid │ ├── base.css │ └── grid.html └── float-vs-flex ├── images └── logo.png ├── intro.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | [![Youtube][youtube-shield]][youtube-url] 2 | [![Facebook][facebook-shield]][facebook-url] 3 | [![Instagram][instagram-shield]][instagram-url] 4 | [![LinkedIn][linkedin-shield]][linkedin-url] 5 | 6 | 7 |
8 |

9 |

CSS Flexbox - A complete guide in Bangla

10 | 11 | A complete guide on CSS Flexbox Layout system described in Bangla. Please check the video tutorial here - 12 | 13 | [![View on Youtube](http://img.youtube.com/vi/kRS5ficucNM/0.jpg)](http://www.youtube.com/watch?v=kRS5ficucNM) 14 | 15 | 16 | 17 | ## Table of Contents 18 | 19 | - [How to run](#how-to-run) 20 | - [Contact](#contact) 21 | 22 | 23 | 24 | ## How to run 25 | 26 | Please follow the below instructions to run this project in your machine: 27 | 28 | 1. Clone this repository 29 | ```sh 30 | git clone https://github.com/learnwithsumit/css-flexbox-tutorial.git 31 | ``` 32 | 2. Watch the youtube tutorial on this topic - https://youtu.be/kRS5ficucNM. 33 | 3. Double click any of the html file to see output as described in youtube tutorial. 34 | 35 | 36 | 37 | ## Contact 38 | 39 | Sumit Saha - [sumit@learnwithsumit.com](mailto:sumit@learnwithsumit.com) 40 | 41 | Project Link: [https://github.com/learnwithsumit/css-flexbox-tutorial](https://github.com/learnwithsumit/css-flexbox-tutorial) 42 | 43 | Youtube Channel: [https://youtube.com/LearnwithSumit](https://youtube.com/LearnwithSumit) 44 | 45 | 46 | 47 | [youtube-shield]: https://img.shields.io/badge/-Youtube-black.svg?style=flat-square&logo=youtube&color=555&logoColor=white 48 | [youtube-url]: https://youtube.com/LearnwithSumit 49 | [facebook-shield]: https://img.shields.io/badge/-Facebook-black.svg?style=flat-square&logo=facebook&color=555&logoColor=white 50 | [facebook-url]: https://facebook.com/letslearnwithsumit 51 | [instagram-shield]: https://img.shields.io/badge/-Instagram-black.svg?style=flat-square&logo=instagram&color=555&logoColor=white 52 | [instagram-url]: https://instagram.com/learnwithsumit 53 | [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat-square&logo=linkedin&colorB=555 54 | [linkedin-url]: https://linkedin.com/company/learnwithsumit 55 | -------------------------------------------------------------------------------- /example/base.css: -------------------------------------------------------------------------------- 1 | @import "https://fonts.googleapis.com/css?family=Montserrat"; 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | background: #f5f5f5; 11 | } 12 | 13 | .wrap { 14 | max-width: 1100px; 15 | margin: 0 auto; 16 | padding: 10px; 17 | height: calc(100vh - 20px); 18 | } 19 | 20 | .container { 21 | margin: 10px 0; 22 | padding: 10px; 23 | box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2); 24 | background-color: #fff; 25 | height: 100%; 26 | } 27 | 28 | .item { 29 | color: #fff; 30 | background-color: #cccccc; 31 | padding: 20px; 32 | font-family: "Montserrat"; 33 | font-size: calc(1vw + 1em); 34 | } 35 | 36 | .a { 37 | background-color: violet; 38 | } 39 | 40 | .b { 41 | background-color: yellowgreen; 42 | } 43 | 44 | .c { 45 | background-color: royalblue; 46 | } 47 | 48 | .d { 49 | background-color: rebeccapurple; 50 | } 51 | -------------------------------------------------------------------------------- /example/flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Flexbox 7 | 8 | 46 | 47 | 48 |
49 |
50 |
51 |
A
52 |
B
53 |
D
54 |
55 |
56 |
C
57 |
58 |
59 |
60 | 61 | 62 | -------------------------------------------------------------------------------- /example/grid/base.css: -------------------------------------------------------------------------------- 1 | @import "https://fonts.googleapis.com/css?family=Montserrat"; 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | background: #f5f5f5; 11 | } 12 | 13 | .wrap { 14 | max-width: 1100px; 15 | margin: 0 auto; 16 | padding: 10px; 17 | height: calc(100vh - 20px); 18 | } 19 | 20 | .container { 21 | margin: 10px 0; 22 | padding: 10px; 23 | box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2); 24 | background-color: #fff; 25 | height: 100%; 26 | } 27 | 28 | .item { 29 | color: #fff; 30 | background-color: #cccccc; 31 | padding: 20px; 32 | font-family: "Montserrat"; 33 | font-size: calc(1vw + 1em); 34 | } 35 | 36 | .a { 37 | background-color: violet; 38 | } 39 | 40 | .b { 41 | background-color: yellowgreen; 42 | } 43 | 44 | .c { 45 | background-color: royalblue; 46 | } 47 | 48 | .d { 49 | background-color: rebeccapurple; 50 | } 51 | -------------------------------------------------------------------------------- /example/grid/grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Flexbox 7 | 8 | 36 | 37 | 38 |
39 |
40 |
A
41 |
B
42 |
C
43 |
D
44 |
45 |
46 | 47 | 48 | -------------------------------------------------------------------------------- /float-vs-flex/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithsumit/css-flexbox-tutorial/8abf175efd9dac1f9503fb81d313f4abf3a89c21/float-vs-flex/images/logo.png -------------------------------------------------------------------------------- /float-vs-flex/intro.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Why Flexbox 8 | 9 | 10 | 11 |
12 | 13 |

USING FLOAT

14 |
15 |
16 | Lorem Ipsum is simply dummy text of the printing and typesetting 17 | industry. 18 |
19 | 23 |
24 | Lorem Ipsum is simply dummy text of the printing and typesetting 25 | industry. 26 |
27 |
28 | Lorem Ipsum is simply dummy text of the printing and typesetting 29 | industry. 30 |
31 |
32 | 33 | 34 |

USING FLEXBOX

35 |
36 |
37 | Lorem Ipsum is simply dummy text of the printing and typesetting 38 | industry. 39 |
40 |
41 | Lorem Ipsum is simply dummy text of the printing and typesetting 42 | industry. Lorem Ipsum is simply dummy text of the printing and 43 | typesetting industry. Lorem Ipsum is simply dummy text of the printing 44 | and typesetting industry. 45 |
46 |
47 | Lorem Ipsum is simply dummy text of the printing and typesetting 48 | industry. 49 |
50 |
51 |
52 | 53 | 54 | -------------------------------------------------------------------------------- /float-vs-flex/style.css: -------------------------------------------------------------------------------- 1 | @import "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap"; 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | font-family: "Montserrat", sans-serif; 11 | font-size: 0.8rem; 12 | } 13 | 14 | .container { 15 | max-width: 450px; 16 | margin: 2rem auto; 17 | padding: 0.5rem; 18 | } 19 | 20 | img { 21 | width: 100px; 22 | float: left; 23 | } 24 | 25 | h2 { 26 | font-weight: bold; 27 | } 28 | 29 | main { 30 | background-color: skyblue; 31 | padding: 0.5rem; 32 | border: 1px solid #666; 33 | /* overflow: auto; */ 34 | } 35 | 36 | section:first-of-type { 37 | background-color: thistle; 38 | padding: 0.5rem; 39 | border: 1px solid #666; 40 | } 41 | 42 | section:last-of-type { 43 | background-color: turquoise; 44 | padding: 0.5rem; 45 | border: 1px solid #666; 46 | } 47 | 48 | /* float */ 49 | .float { 50 | margin: 1rem 0 2rem; 51 | overflow: auto; 52 | } 53 | 54 | .float section:first-of-type { 55 | float: left; 56 | width: 50%; 57 | } 58 | 59 | .float section:last-of-type { 60 | float: right; 61 | width: 50%; 62 | } 63 | 64 | /* flex */ 65 | .flexbox { 66 | margin: 1rem 0 2rem; 67 | display: flex; 68 | flex-flow: row wrap; 69 | justify-content: space-between; 70 | } 71 | 72 | .flexbox > main { 73 | flex-basis: 100%; 74 | } 75 | 76 | .flexbox section { 77 | flex-basis: 50%; 78 | flex-grow: 1; 79 | } 80 | --------------------------------------------------------------------------------