Super Simple Flexbox Side Nav（练习了flex-direciton，justify-content等内容）

index.html

<div class="sidebar">
  <!-- This section shoudl be at the top-->
  <div class="section1">
    <div class="item">Messages</div>
    <div class="item">Friends</div>
    <div class="item">User Profile</div>
  </div>
  <!-- This section should be at the botto -->
  <div class="section2">
    <div class="item">Settings</div>
    <div class="item">Questions?</div>
  </div>
</div>

style.css

@import url('https://fonts.googleapis.com/css?family=Raleway:200');

body {
	margin: 0;
  background: #ecf0f1;
}

.sidebar {
  height: 100vh;
  width: 15vw;
  font-family: raleway;
  background: #34495e;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border: 10px solid pink;


.item {
  color: white;
  font-size: 20px;
  padding-left:15px;
}
.section1 {
/*   display:flex;
  flex-direction:column; */
 
}
.section2 {
/* display:flex;
flex-direction:column;
 */
}

super-simple-flexbox-side-nav-starter.markdown

Super Simple Flexbox Side Nav STARTER

A Pen by liuxiaomingskm on CodePen.

License.