Css Flexbox

In this example below you will see how to do a Css Flexbox with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by MightyJoeW, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MightyJoeW ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Css Flexbox</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class="header ">
    <h1>Why learn CSS GRID layout?</h1>
   </div>
  <div class="subheader default">
    <h1>easier to create two dimensional layouts</h1>
   </div>
  <div class="row-1">
    <div class="col-1 default">
      <h3>simpler markup</h3>
     </div>
    <div class="col-2 default">
      <h3>flexible</h3>
    </div>
  </div>
  <div class="row-2">
    <div class="col-1 default">
      <h3>skip frameworks</h3>
    </div>
    <div class="col-2 default">
      <h3>browser support</h3>
    </div>
  </div>
  <div class="footer default">
    <h3>See Examples</h3>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/MightyJoeW/css-flexbox-BJOQqP */
body {
  background: #FFEDB3;
  font-family: arial;
}
.default {
  text-transform: uppercase;
  text-align: center;
  background: #74D8B3;
  color: #FFEDB3;
  margin: 2px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 1%;
}

.header {
  text-align: center;
  width: 100%;
  background: none;
}

.subheader {
  width: 100%;
}

.row-1 {
  display: flex;
  width: 100%;
}

.row-2 {
  display: flex;
  width: 100%;
}

.col-1 {
  width: 50%;
}

.col-2 {
  width: 50%;
}

.footer {
  width: 100%;
}

@media (max-width: 1024px) {
  .container {
    flex-wrap: wrap;
  }
}

Comments