scss Flex卡

Posted 2021-05-17

<div class="container">
  <div class="cards">
    <div class="card">
      <div class="card-inner">Hello there</div>
    </div>
    <div class="card">
      <div class="card-inner">Hello there</div>
    </div>
    <div class="card">
      <div class="card-inner">Hello there</div>
    </div>
    <div class="card">
      <div class="card-inner">Hello there</div>
    </div>
    <div class="card">
      <div class="card-inner">Hello there</div>
    </div>
  </div>
</div>

/* Grid will not work without this */
*,* :before, *:after {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}

body {
  color: white;
  font-family: sans-serif;
  font-weight: bold;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid red;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 30px);
  
  margin: -15px;
}

.card {
  width:50%;
  @media(max-width:400px) {
    width: 50%;
  }
  padding: 15px;
}

.card-inner{
  background:blue;
}