Skip to content
High-Performance Full Stack-Development

Search is only available in production builds. Try building and previewing the site to test it out locally.

Applying flexbox properties to HTML Doc

Below shows how CSS flexbox properties are applied to an html document using internal CSS declaration.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .flex-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 100vh;
      }
      .flex-item {
        flex-grow: 1;
        flex-basis: 100px;
        margin: 10px;
        padding: 20px;
        background-color: lightblue;
        text-align: center;
      }
    </style>
    <title>CSS Flexbox Properties Example</title>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">Item 1</div>
      <div class="flex-item">Item 2</div>
      <div class="flex-item">Item 3</div>
    </div>
  </body>
</html>