DEV Community

Talha Shinwari
Talha Shinwari

Posted on

Flexbox Practice HTML, CSS

#codepen

HTML 

<body> <div class="container"> <div class="flex">ONE</div> <div class="flex">TWO</div> <div class="flex">THREE</div> <div class="flex">FOUR</div> <div class="flex">FIVE</div> <div class="flex">SIX</div> <div class="flex">SEVEN</div> <div class="flex">EIGHT</div> </div> </body>
Enter fullscreen mode Exit fullscreen mode

CSS 

.container{ display: flex; flex-wrap: wrap; background-color: darkmagenta; justify-content: flex-start; } .flex{ display: flex; width: 200px; height: 200px; margin: 10px; border: 2px solid black; border-radius: 5px; box-sizing: border-box; background-color: yellow; justify-content: center; align-items: center; font-size: large; font-weight: 1000; }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)