Saad Al-Sabbagh Saad Al-Sabbagh - 1 month ago 8
CSS Question

can't get align-self to work in a flexbox container

My code is below.



/* Global */
* {
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
}

/* Container */
#container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}

/* About Me */
.about-me {
width: 100vw;
height: 50vh;
background-color: #9b59b6;
}

.my-information {
text-align: center;
align-self: flex-end;
}

/* Blog Posts */
.blog-posts {
width: 100vw;
height: 50vh;
background-color: #3498db;
}


/* Media Query (Desktop And Bigger) */
@media (min-width: 1100px) {
/* Container */
#container {
flex-direction: row;
}

/* About Me */
.about-me {
height: 100vh;
}

/* Blog Posts */
.blog-posts {
height: 100vh;
}
}

<!DOCTYPE html>
<html>

<head>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Title -->
<title>Saad Al-Sabbagh</title>

<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
<link rel="stylesheet" href="css/main.css">
</head>

<body>

<!-- Container -->
<div id="container">
<div class="about-me">
<div class="my-information">
<h1>A person</h1>
<p>Front-End Web Developer, Blogger and an author on
<a href="#">SitePoint</a>.</p>
</div>
</div>

<div class="blog-posts">

</div>
</div>

</body>

</html>





I am trying to create a simple two column website using flexbox, I've heard a lot of bad stories where I shouldn't use flexbox for complete site layouts but I believe layout as simple as this would be better off using a flexbox.

I have a div as you can see with the class .my-information and i am trying to align-self it to the bottom of the flex container .about-me, but it doesn't seem to work.

Answer

You also need to add display: flex on about div and to center elements you can use justify-content: center.

#container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.about-me {
  width: 100vw;
  height: 50vh;
  display: flex;                /*Added*/
  justify-content: center;      /*Added*/
  background-color: #9b59b6;
}
.my-information {
  text-align: center;
  align-self: flex-end;
}
.blog-posts {
  width: 100vw;
  height: 50vh;
  background-color: #3498db;
}
<div id="container">
  <div class="about-me">
    <div class="my-information">
      <h1>A person</h1>
      <p>Front-End Web Developer, Blogger and an author on
        <a href="#">SitePoint</a>.</p>
    </div>
  </div>

  <div class="blog-posts"></div>
</div>

Comments