Saya baru mengenal Flexbox dan mencoba membuat kalender berbasis tabel yang responsif dengan warna latar belakang bulat pada sel tertentu. Masalah yang saya hadapi adalah karena lebar setiap sel dinamis dan pada ukuran layar yang lebih luas (sebagian besar), latar belakangnya berbentuk oval, bukan lingkaran. Bagaimana saya bisa mengaturnya sebagai lingkaran tanpa mengganggu tata letak saat ini atau menggunakan ukuran tetap?

Sebagai bonus, saya juga ingin dapat menyelaraskan tanggal/tahun secara dinamis dengan kolom paling kiri.

CSS:

.table {
  display: flex;
  flex-flow: column nowrap;
  box-pack: justify;
  justify-content: space-between;
  width: 100%;
  height: 250px;
}
.table .table-row {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
}
.table .table-row .table-cell {
  display: flex;
  padding: 5px;
  flex-flow: row nowrap;
  flex-grow: 1;
  flex-basis: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  justify-content: center;
}
.table .table-row .event-on {
  border-radius: 100%;
  background-color: grey;
}

Markup:

<section id="event-calendar">
  <div id="calendar-left">
    <div id="calendar-left-cont">
      <h1>December 2016</h1>
      <div class="table">
        <div class="table-row table-header">
          <div class="table-cell">S</div>
          <div class="table-cell">M</div>
          <div class="table-cell">T</div>
          <div class="table-cell">W</div>
          <div class="table-cell">T</div>
          <div class="table-cell">F</div>
          <div class="table-cell">S</div>
        </div>
        <div class="table-row">
          <div class="table-cell"></div>
          <div class="table-cell"></div>
          <div class="table-cell event-on">1</div>
          <div class="table-cell">2</div>
          <div class="table-cell">3</div>
          <div class="table-cell">4</div>
          <div class="table-cell">5</div>
        </div>
        <div class="table-row">
          <div class="table-cell">6</div>
          <div class="table-cell">7</div>
          <div class="table-cell">8</div>
          <div class="table-cell">9</div>
          <div class="table-cell">10</div>
          <div class="table-cell">11</div>
          <div class="table-cell">12</div>
        </div>
        <div class="table-row">
          <div class="table-cell">13</div>
          <div class="table-cell">14</div>
          <div class="table-cell">15</div>
          <div class="table-cell">16</div>
          <div class="table-cell">17</div>
          <div class="table-cell">18</div>
          <div class="table-cell">19</div>
        </div>
        <div class="table-row">
          <div class="table-cell">20</div>
          <div class="table-cell">21</div>
          <div class="table-cell">22</div>
          <div class="table-cell">23</div>
          <div class="table-cell">24</div>
          <div class="table-cell">25</div>
          <div class="table-cell">26</div>
        </div>
        <div class="table-row">
          <div class="table-cell">27</div>
          <div class="table-cell">28</div>
          <div class="table-cell">29</div>
          <div class="table-cell">30</div>
          <div class="table-cell"></div>
          <div class="table-cell"></div>
          <div class="table-cell"></div>
        </div>
      </div>
    </div>
  </div>
</section>

Pena: http://codepen.io/ourcore/pen/rWbjYZ.

Terima kasih!

1
Mario Parra 22 Desember 2016, 10:36

1 menjawab

Jawaban Terbaik

Menambahkan elemen pseudo dan menambahkan beberapa gaya ke dalamnya.

.table {
  display: flex;
  flex-flow: column nowrap;
  box-pack: justify;
  justify-content: space-between;
  width: 100%;
  height: 250px;
}
.table .table-row {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
}
.table .table-row .table-cell {
  display: flex;
  padding: 5px;
  flex-flow: row nowrap;
  flex-grow: 1;
  flex-basis: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  justify-content: center;
}
.table .table-row .event-on {
  border-radius: 100%;
  position: relative;
}
div.table-cell.event-on::before {
  content: '';
  width: 25px;
  height: 25px;
  background-color: grey;
  position: absolute;
  z-index: -9;
  left: 10px;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  border-radius: 13px;
}
<section id="event-calendar">
  <div id="calendar-left">
    <div id="calendar-left-cont">
      <h1>December 2016</h1>
      <div class="table">
        <div class="table-row table-header">
          <div class="table-cell">S</div>
          <div class="table-cell">M</div>
          <div class="table-cell">T</div>
          <div class="table-cell">W</div>
          <div class="table-cell">T</div>
          <div class="table-cell">F</div>
          <div class="table-cell">S</div>
        </div>
        <div class="table-row">
          <div class="table-cell"></div>
          <div class="table-cell"></div>
          <div class="table-cell event-on">1</div>
          <div class="table-cell">2</div>
          <div class="table-cell">3</div>
          <div class="table-cell">4</div>
          <div class="table-cell">5</div>
        </div>
        <div class="table-row">
          <div class="table-cell">6</div>
          <div class="table-cell">7</div>
          <div class="table-cell">8</div>
          <div class="table-cell">9</div>
          <div class="table-cell">10</div>
          <div class="table-cell">11</div>
          <div class="table-cell">12</div>
        </div>
        <div class="table-row">
          <div class="table-cell">13</div>
          <div class="table-cell">14</div>
          <div class="table-cell">15</div>
          <div class="table-cell">16</div>
          <div class="table-cell">17</div>
          <div class="table-cell">18</div>
          <div class="table-cell">19</div>
        </div>
        <div class="table-row">
          <div class="table-cell">20</div>
          <div class="table-cell">21</div>
          <div class="table-cell">22</div>
          <div class="table-cell">23</div>
          <div class="table-cell">24</div>
          <div class="table-cell">25</div>
          <div class="table-cell">26</div>
        </div>
        <div class="table-row">
          <div class="table-cell">27</div>
          <div class="table-cell">28</div>
          <div class="table-cell">29</div>
          <div class="table-cell">30</div>
          <div class="table-cell"></div>
          <div class="table-cell"></div>
          <div class="table-cell"></div>
        </div>
      </div>
    </div>
  </div>
</section>
4
aavrug 22 Desember 2016, 07:43