<header>header</header>
<main>
  <h1>1.flex-direction: row;</h1>
  <div class="wrapper row">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
  
  <h1>2.flex-direction: row-reverse;</h1>
  <div class="wrapper row-reverse">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
  
  <h1>3.flex-direction: column;</h1>
  <div class="wrapper column">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
  
  <h1>4.flex-direction: column-reverse</h1>
  <div class="wrapper column-reverse">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
  
   <h1>5.flex-wrap: nowrap;</h1>
  <div class="wrapper nowrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
  
  <h1>6.flex-wrap: wrap-reverse;</h1>
  <div class="wrapper wrap-reverse">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
  
  <h1>7.flex-grow: 1;</h1>
  <div class="wrapper flex-grow1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
  
  <h1>8. odd: flex-grow: 1; even: flex-grow: 2;</h1>
  <div class="wrapper flex-grow">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
  
  <h1>9. odd: order: 0; even: 1;</h1>
  <div class="wrapper flex-grow1 order1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
  
  <h1>10. justify-content: flex-end;</h1>
  <div class="wrapper flex-end">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
  
  <h1>11. justify-content: center;</h1>
  <div class="wrapper center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
  
  <h1>12. justify-content: space-between;</h1>
  <div class="wrapper space-between">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
  
  <h1>13.justify-content: space-around;</h1>
  <div class="wrapper space-around">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
 </main>

<footer>footer</footer>

html, body {
  font-size: 20px; 
  text-align: center;
  height: 100%;
}
header {
  background: #ee3333;
}
h1 {
  font-size: 1rem;
  background: rgba( 50, 50, 50, 0.8);
  color: #eee;
  margin: 0;
}

.wrapper {
  display: flex;
  display: -webkit-flex;
  /* Flexアイテムの合計幅がFlexコンテナの幅を超えると、Flexアイテムの幅は自動的に縮小 */
  flex-wrap: wrap;
}
.wrapper + h1 {
  margin-top: 1rem;
}

.wrapper div {
  width: 5rem;
  height: 5rem;
  line-height: 5rem;
  font-size: 2rem;
  border: 0.05rem #333 solid;
}
.wrapper div:nth-of-type(2n+1) {
  background-color: rgba(10, 10, 200, 0.5);
}
.wrapper div:nth-of-type(2n) {
  background-color: rgba(10, 200, 10, 0.5);
}

/* 1.flex-direction: row; */
.row {
  flex-direction: row;
}

/* 2.flex-direction: row-reverse; */
.row-reverse {
  flex-direction: row-reverse;
}

/* 3.flex-direction: column; */
.column {
  flex-direction: column;
}

/* 4.flex-direction: column-reverse */
.column-reverse {
  flex-direction: column-reverse;
}

/* 5.flex-wrap: nowrap; */
.nowrap {
  flex-wrap: nowrap;  
}

/* 6.flex-wrap: wrap-reverse;*/
.wrap-reverse {
  flex-wrap: wrap-reverse;
}

/* 7.fles-grow: 1; */
.flex-grow1 div {
  flex-grow: 1;
}

/* 8. odd: flex-grow: 1; even: flex-grow: 2;*/
.flex-grow div:nth-of-type(2n+1) {
  flex-grow: 1;
}
.flex-grow div:nth-of-type(2n) {
  flex-grow: 2;
}

/* 
9. odd: order: 0; even: 1;
*/
.order1 div:nth-of-type(2n){
  order: 1;
}

/* 10. justify-content: flex-end; */
.flex-end {
  /*右揃え、下揃え*/
  justify-content: flex-end;
}

/* 11. justify-content: center; */
.center {
  /*中央揃え*/
  justify-content: center;
}

/* 12. justify-content: space-between; */
.space-between {
  /*均等にコンテンツが開く*/
  justify-content: space-between;
}

/* 13. justify-content: space-around;*/
.space-around {
  /* 左右の端のコンテンツにも、各コンテンツ間隔の半分の間隔がつく */
   justify-content: space-around;
}

footer {
  background: #eeee33;
}