align-self property in flexbox is not working

Question

I would like to have item-2 centered, I cannot get align-self to work. Please what am I doing wrong? I have tried all options of align-self but it doesn't seem to register.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Flex Align</title>
  <style>
    #container {
      background: #555 ;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      height: 600px;
      align-items: baseline;
      align-content: space-between;
    }

    .item-2 {
      align-self: center;
    }  
    
    .item {
      background: #f4f4f4;
      border: #ccc solid 1px;
      padding: 1rem;
      text-align: center;
      margin: 0.5rem;
      flex-basis: 200px;
  }
  </style>
</head>
<body>
  <div id="container">
    <div class="item item-1"><h3>Item 1</h3></div>
    <div class="item item-2"><h3>Item 2</h3></div>
    <div class="item item-3"><h3>Item 3</h3></div>
  </div>
</body>
</html>

Remove align-content: space-between; from #container. – Αntonis Papadakis Nov 27 '19 at 12:16 — Αntonis Papadakis, Nov 27 '19 at 12:16
https://stackoverflow.com/q/42613359/3597276 – Michael Benjamin Nov 28 '19 at 00:51 — Michael Benjamin, Nov 28 '19 at 00:51

score 0 · Answer 1 · answered Nov 27 '19 at 12:24

0

If you remove the align-content: space-between from the container and add a height to the .item, you will then be able to select an individual item and align-self: center to set that item vertically in the middle.

answered Nov 27 '19 at 12:24

Danny Moss

14
1

align-self property in flexbox is not working

1 Answers1