How to work with Flexbox elements in CSS?

CSS Web Development Front End Technology

Define a flex container and set the flex items in it.

You can try to run the following code to learn how to implement Flexbox elements. Q1, Q2, Q3 here are the flex-items. The entire area is Flexbox element

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: orange;
         }
         .mycontainer > div {
            background-color: white;
            text-align: center;
            line-height: 40px;
            font-size: 25px;
            width: 100px;
            margin: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Quiz</h1>
      <div class = "mycontainer">
         <div>Q1</div>
         <div>Q2</div>
         <div>Q3</div>
         <div>Q4</div>
         <div>Q5</div>
         <div>Q6</div>
      </div>
   </body>
</html>

Arjun Thakur

Published on 24-May-2018 12:10:30

Previous Page Print Page