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>

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;
}

Blog

Flexbox Practice HTML, CSS

Talha Shinwari

HTML

CSS

Join Our Newsletter. No Spam, Only the good stuff.

Related