Flexbox template

What is a flexbox template How do you make a flexbox template? This script and codes were developed by Brandon Ward on 21 February 2022, Monday.

How do I make an flexbox template?
  1. Flexbox template Previews
  2. Flexbox template HTML Codes
  3. Flexbox template CSS Codes
Flexbox template Previews

Flexbox template HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Flexbox template</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="flex-container">
  <div class="flex-inner-container">
    <div class="flex-box flex-box-1"></div>
    <div class="flex-box flex-box-2"></div>
    <div class="flex-box flex-box-3"></div>
    <div class="flex-box flex-box-4"></div>
    <div class="flex-box flex-box-5"></div>
    <div class="flex-box flex-box-6"></div>
    </div>
</div>
  
  
</body>
</html>

Flexbox template CSS Codes

body {
  margin: 0;
  background-color: rgba(11, 166, 244, 0.07);
}

.flex-container {
  max-width: 1080px;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
}

.flex-inner-container {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: center;
}
.flex-inner-container .flex-box {
  background: #0ba6f4;
  padding: 0;
  width: 320px;
  height: 320px;
  margin: 0.75em;
  border-radius: 6px;
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.