在flexbox列

时间：2016-12-23 07:21:12

标签： html css flexbox

我是flexbox的新手，并试图在他们自己的列中分别垂直对齐最左边和右边的.calendar-arrow元素。我试过绝对定位它们，但是它们要么坐在我的1280px边距之外，要么太靠近边缘和日历。理想情况下，我想实现一个布局，其中包含自己垂直对齐的flexbox列中的箭头。例如，左箭头应围绕左侧6，右箭头围绕右侧箭头。

* {
  box-sizing: border-box;
}
section {
  max-width: 1280px;
}
#event-calendar {
  margin: 0 auto;
  padding: 0 1%;
  overflow: auto;
}
#event-calendar h1 {
  padding-bottom: 15px;
  text-align: center;
}
#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: grey;
}
#event-calendar .table .table-row.table-header .table-cell {
  color: grey;
}
.table {
  display: flex;
  position: relative;
  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: '';
  background-color: orange;
}
.calendar-arrow a {
  font-size: 2em;
}
<section id="event-calendar">
  <div id="calendar-left">
    <div id="calendar-left-cont">
      <h1>December 2016</h1>
      <div class="table">
        <div class="calendar-arrow">
          <a class="icon-arrow-left" href="#">&larr;</a>
        </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="calendar-arrow">
          <a class="icon-arrow-right" href="#">&rarr;</a>
        </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">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/LbvvyG?editors=1100#0

谢谢！

1 个答案:

答案 0 :(得分：1)

这是代码。因为它的scss，所以它不会在这里运行。这是工作pen

＆＃13;
＆＃13; 
* {
  box-sizing: border-box;
}
section {
  max-width: 1280px;
}
#event-calendar {
  margin: 0 auto;
  padding: 0 1%;
  overflow: auto;
  h1 {
    padding-bottom: 15px;
    text-align: center;
  }
  #calendar-left {
    float: left;
    border-right: 1px solid grey;
    padding: 30px;
    width: 50%;
    height: 400px;
  }
  #calendar-right {
    float: right;
    padding: 30px;
    width: 50%;
    height: 400px;
  }
  .table {
    .table-row {
      .table-cell {
        font-size: 2em;
        color: grey;
      }
    }
    .table-row.table-header {
      .table-cell {
        color: grey;
      }
    }
  }
}

.table {
  display: flex;
  position: relative;
  flex-flow: column nowrap;
  box-pack: justify;
  // margin:0 auto;
  justify-content: space-between;
  // width: 96%;
  height: 250px;
  .table-row {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    align-items: center;
    .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;
    }
    .event-on {
      position: relative;
      &::before {
        position: absolute;
        z-index: -9;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        border-radius: 100%;
        width: 35px;
        height: 35px;
        content: '';
        background-color: orange;
      }
    }
  }
}

.calendar-arrow {
  a {
    font-size: 2em;
    // width:3%;
    // position:absolute;
    // top:45%;
  }
}
.event-calendar{
  // display:flex;
  // flex-direction:row;
  // align-items:center;
}
a.icon-arrow-left{
  // left:2%;
}
a.icon-arrow-right{
  // right:5%;
}
.table{
  width:100%;
  margin:0 auto;
}
.toFlex{
  margin:0;
  padding:0;
  display:flex;
  flex-direction:row;
}
.calendar-arrow{
  width:35px;
  flex-shrink:0;
  align-items:center;
  display:flex;
}
.toFlex1{
  margin:0;
  padding:0;
  flex-grow:1;
  flex-shrink:0;
}
＆＃13; 
<section id="event-calendar">
  
  <div id="calendar-left">
    <div id="calendar-left-cont">
      <h1>December 2016</h1>
      <div class="table">
        <div class="toFlex">
        <div class="calendar-arrow">
          <a class="icon-arrow-left" href="#">&larr;</a>
        </div>
          <div class="toFlex1">
        <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>
  </div>
  <div id="calendar-right">
    <div id="calendar-right-cont">
      <h1>January 2017</h1>
      <div class="table">
        
        <div class="toFlex">
        
          <div class="toFlex1">
        <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>
          <div class="calendar-arrow">
          <a class="icon-arrow-right" href="#">&rarr;</a>
        </div>
         </div>
      </div>
    </div>
  </div>
  
</section>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题