1

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.

saad.sawash
  • 229
  • 1
  • 10

1 Answers1

1

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>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
  • One question though, when using display: flex; on a div element won't that make any direct children of that specific div, flexbox "Children"? If that's the case why do I need to change the display type of .about-me into flex as long as the #container has it? – saad.sawash Oct 25 '16 at 21:31
  • 1
    I don't think so, only direct child elements become flex-child of parent or flex-container element as you can see here for example `child` elements are still `block` as default https://jsfiddle.net/Lg0wyt9u/1280/ – Nenad Vracar Oct 25 '16 at 21:35
  • Oh! Nice new information, so each container should be dealt with as a different flexbox. Makes sense. Thanks for the help! – saad.sawash Oct 25 '16 at 21:42
  • 1
    @SaadAl-Sabbagh, this may help clarify the behavior: http://stackoverflow.com/a/37844240/3597276 – Michael Benjamin Oct 26 '16 at 01:16
  • 1
    @Michael_B That was a very useful read indeed! Thank you a lot. – saad.sawash Oct 26 '16 at 19:51