Горизонтальное и вертикальное выравнивание в таблице flexbox

Question

Я пытаюсь создать гибкий календарь на основе таблиц с одним столбцом (.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>

Pen: http://codepen.io/ourcore/pen/ENJOLO

Спасибо!

Answer 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