文章/答案/技术大牛

发布

社区首页 >问答首页 >Flexbox细胞上的圆形背景色

问Flexbox细胞上的圆形背景色
EN

Stack Overflow用户

提问于 2016-12-22 07:36:25

回答 1查看 415关注 0票数 1

我是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。

谢谢!

html

css

flexbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-12-22 07:43:58

添加了一个伪元素并给它添加了一些样式。

.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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41277963

复制

相似问题

问Flexbox细胞上的圆形背景色
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexbox细胞上的圆形背景色EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexbox细胞上的圆形背景色
EN