scss レスポンシブ：リスト

Posted 2021-05-17

レスポンシブ：リスト
----------


A [Pen](https://codepen.io/anonie/pen/ZEzKRjY) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/ZEzKRjY/license).

<div class="inner">
  <div class="p-update-list">
  <ul>
    <li class="p-update-list__item"><div class="p-update-list__date">2019.05.30</div><div class="p-update-list__cate">カテゴリ</div><h2 class="p-update-list__link"><a href="#">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまもむめもらりるれろわをんあいうえおかきくけこさしすせそ</a></h2></li>
    <li class="p-update-list__item"><div class="p-update-list__date">2019.05.30</div><div class="p-update-list__cate">カテゴリ</div><h2 class="p-update-list__link"><a href="#">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまもむめもらりるれろわをんあいうえおかきくけこさしすせそ</a></h2></li>
    <li class="p-update-list__item"><div class="p-update-list__date">2019.05.30</div><div class="p-update-list__cate">カテゴリ</div><h2 class="p-update-list__link"><a href="#">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまもむめもらりるれろわをんあいうえおかきくけこさしすせそ</a></h2></li>


  </ul>
  </div>
</div>

*, *::before, *::after {  box-sizing: border-box; }
body { background: #eee; }
.inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.inner { background: #fff; margin: 3rem auto; padding: 3rem; } // 視認性用

.p-update-list__item { // li
  display: flex;
  align-items: center;
  margin: 1em 0;
  height: 1em;
  @media only screen and (max-width: 767px) {
    display: block;
    margin: 1.5em 0;
    height: 3em;
  }
}
.p-update-list__date {
  display: inline-block;
  min-width: 6.5em;
  // @media only screen and (max-width: 767px) {
  //   width: auto;
  // }
}
.p-update-list__cate {
  display: inline-block;
  min-width: 10em;
  background: #ccc;
  font-size: 70%;
  padding: 0.5em 3em;
  @media only screen and ( min-width: 768px ) {
      margin-right: 2em;
  }
}
.p-update-list__link { // h2
  display: inline-block;
  overflow: hidden;
  width: auto;
  height: 1em;
  @media only screen and (max-width: 767px) {
    width: 100%;
    margin-top: 0.5em;
  }
}
.p-update-list__link > a {
  display: inline-block;
}