TryIt Editor v2.0 - CSS place-items another code example

Source Code: (back to article)

Result: Report an issue

<!DOCTYPE html>

<html>

<head>

<title>Title of the document </title>

<style>

#container {

height: 200px;

width: 230px;

place-items: center;

background-color: #ccc;

}

.flex {

display: flex;

flex-wrap: wrap;

}

div > div {

box-sizing: border-box;

border: 3px solid #ccc;

width: 50px;

display: flex;

align-items: center;

justify-content: center;

}

#box1 {

background-color: #666;

min-height: 40px;

}

#box2 {

background-color: #1c87c9;

min-height: 50px;

}

#box3 {

background-color: #fff;

min-height: 40px;

}

#box4 {

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      #container {
        height: 200px;
        width: 230px;
        place-items: center;
        background-color: #ccc;
      }
      .flex {
        display: flex;
        flex-wrap: wrap;
      }
      div > div {
        box-sizing: border-box;
        border: 3px solid #ccc;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #box1 {
        background-color: #666;
        min-height: 40px;
      }
      #box2 {
        background-color: #1c87c9;
        min-height: 50px;
      }
      #box3 {
        background-color: #fff;
        min-height: 40px;
      }
      #box4 {
        background-color: #ff0000;
        min-height: 60px;
      }
      #box5 {
        background-color: #eee;
        min-height: 70px;
      }
      #box6 {
        background-color: #8ebf42;
        min-height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Place-items property example</h2>
    <div id="container" class="flex">
      <div id="box1">1</div>
      <div id="box2">2</div>
      <div id="box3">3</div>
      <div id="box4">4</div>
      <div id="box5">5</div>
      <div id="box6">6</div>
    </div>
  </body>
</html>