求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

Flexbox実践 - 文字と写真を互い違いにレイアウト

文字と写真を互い違いにレイアウト

  • Flexboxを使ったレイアウト


f:id:web-0220:20190225041221p:plain

@charset "UTF-8";

html,body,h1,h2,p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
img {
  vertical-align: bottom;
  max-width: 100%;
}
html {
  font-size: 62.5%;
}
body {
  color: #333;
  font-size: 1.6rem;
  font-family:
    -apple-system, BlinkMacSystemFont,
    'Noto Sans JP', sans-serif;
}
.content-wrap {
  text-align: center;
}
.content-text {
  padding: 3.0rem;
    & h2 {
      margin-bottom: 16px;
    }
    & p {
      line-height: 1.6;
      text-align: left;
    }
}

@media screen and (min-width: 768px){

  .content-wrap {
    display: flex;
    justify-content: space-between;
    max-width: 960px;
    margin: 0 auto 5rem;
  }
  .content-wrap:nth-child(odd) {
    flex-direction: row-reverse;
  }
  .content-text {
    width: 45%;
    padding: 0 3.0rem 0 0;
  }
  .content-wrap:nth-child(even) .content-text {
    padding: 0 0 0 3.0rem;
  }
  .content-img {
    width: 55%; 
  }
  .content-text h2 {
    font-size: 2.8rem;
  }
  
}