Flexbox单元格上的圆形背景颜色

时间：2016-12-22 07:36:25

标签： html css flexbox

我是Flexbox的新手，并尝试在某些单元格上构建一个基于响应表格的日历，其中包含圆形背景颜色。我遇到的问题是，由于每个单元格的宽度是动态的，并且在更宽（大多数）的屏幕尺寸上，背景是椭圆形，而不是圆形。如何将它们设置为圆圈而不会干扰当前布局或使用固定尺寸？

作为奖励，我还希望能够将日期/年份与最左边的列动态对齐。

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;
}

标记：

<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>

笔：http://codepen.io/ourcore/pen/rWbjYZ。

谢谢！

2 个答案:

答案 0 :(得分：4)

添加了一个伪元素并为其添加了一些样式。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

使用了<span>和......

    过去几天
  • <s>
  • <i>活动
  • <b>重要事件

将.table-cell flex-flow更改为column nowrap并添加align-items:center

CODEPEN

相关问题
最新问题