DEV Community 👩‍💻👨‍💻

Talha Shinwari
Talha Shinwari

Posted on

Flexbox Practice HTML, CSS

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)

Let's Get Wacky


Use any Linode offering to create something unique or silly in the DEV x Linode Hackathon 2022 and win the Wacky Wildcard category

Join the Hackathon <-