flexbox 表格中的水平和垂直对齐方式答案

【问题标题】：Horizontal and vertical alignment in a flexbox tableflexbox 表格中的水平和垂直对齐方式
【发布时间】：2016-12-23 09:15:24
【问题描述】：

我正在尝试构建一个基于表格的响应式日历，其中一列 (.calendar-arrow) 在其他列旁边垂直居中。

我还尝试在不使用静态填充值的情况下将月/日期标题与第一列（星期日列）左对齐。

我愿意重构 HTML。

* {
  box-sizing: border-box;
}
#event-calendar {
  margin: 0 auto;
  padding: 0 1%;
  overflow: auto;
}
#event-calendar h1 {
  padding-bottom: 15px;
  text-align: left;
}
#event-calendar #calendar-left {
  float: left;
  border-right: 1px solid grey;
  padding: 30px;
  width: 50%;
  height: 400px;
}
#event-calendar #calendar-right {
  float: right;
  padding: 30px;
  width: 50%;
  height: 400px;
}
#event-calendar .table .table-row .table-cell {
  font-size: 2em;
  color: black;
}
#event-calendar .table .table-header .table-cell {
  color: grey;
}
.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%;
  align-items: center;
}
.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 {
  position: relative;
}
.table .table-row .event-on::before {
  position: absolute;
  z-index: -9;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  border-radius: 100%;
  width: 35px;
  height: 35px;
  content: '';
}
.table .calendar-arrow {
  display: flex;
  flex-flow: column nowrap;
  flex-grow: 1;
  flex-basis: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  justify-content: center;
}

<section id="event-calendar">
  <div id="calendar-left">
    <div id="calendar-left-cont">
      <h1>December 2016</h1>
      <div class="table">
        <div class="calendar-arrow">
          &larr;
        </div>
        <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>
  <div id="calendar-right">
    <div id="calendar-right-cont">
      <h1>January 2017</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">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 class="calendar-arrow">
          &rarr;
        </div>
      </div>
    </div>
  </div>
</section>

笔：http://codepen.io/ourcore/pen/ENJOLO

谢谢！

【问题讨论】：

标签： html css flexbox

【解决方案1】：

要使箭头垂直居中，您可以使用绝对定位的伪元素，而不是实际 DOM 元素中的箭头。

从 HTML 中删除箭头并将其添加到您的 CSS：

div.table {
  position: relative;
}
#calendar-left div.table::before {
   content: "\2190";
   position: absolute;
   left: -30px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 2em;
}
#calendar-right div.table::before {
   content: "\2192";
   position: absolute;
   left: -30px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 2em;
}

revised codepen

您的日期标题行与您的月份年份h1 不左对齐的原因是您的标题行以justify-content: center 为中心。

.table-cell {
  display: flex;
  justify-content: center;
}

这会将每列中的数据居中，但不适用于h1。

您必须将两个元素沿它们相互容器的左边缘对齐：

revised codepen

或者您可以删除居中：

revised codepen

【讨论】：

感谢箭头解决方案。我注意到justify-content: center 的这种效果，但我故意使用它来将单个数字居中高于/低于 double。
您将日历中的列数据居中，但 h1 与此对齐方式无关，因为它存在于不同的容器中。将它们左对齐的唯一方法是在它们的相互容器中。 codepen.io/anon/pen/RoOENG?editors=1100
我明白你的意思。有一秒钟，我以为它们在视觉上是对齐的，但后来我意识到它是因为边框而出现的。我尝试将h1 放在与第一个单元格相同的div 中，但它们位于同一行。另外，我认为我应该坚持使用 DOM 元素作为箭头，因为它们需要是导航超链接。
啊，是的。我可能应该将箭头留在 DOM 中。您仍然可以像伪元素一样绝对定位它。应该是一个小的调整。
有道理。我一定会考虑的。现在，只要按照设计师的模板。