1. home
  2. Tutorials
  3. Tutorial
Edit

CSS Flexbox

The flexible box represents the flexible layout which contain multiple boxes.

Example of Code

<style type="text/css">
.outer-container {
  font: 16px sans-serif;
  background: gold;
  color: white;
  height: 200px;
  display: flex;
}
.box {
  padding: 10px;
  flex: 1 0 auto;
}
.larger {
  background: yellowgreen;
  flex: 3 0 auto;
}
</style>
<body>
    <div class="outer-container">
      <div class="box">Box</div>
      <div class="box larger">Larger Box</div>
      <div class="box">Box</div>
      <div class="box larger">Larger Box</div>
    </div>
</body>

Output

Box
Larger Box
Box
Larger Box