如何在flexbox中拉伸此导航链接？

时间：2015-09-30 17:40:44

标签： html css flexbox

我对flexbox没有什么问题，我不太懂。如何将侧边栏的最后一个链接拉伸到与内容框相同的高度？

说明图片：http://postimg.org/image/f3zsn6051/

演示：

＆＃13;
＆＃13; 
$(document).ready(function(){
    $( ".search-btn" ).click(function() {
        $( ".search-bar" ).toggleClass( "hidden" );
    });

    $( ".add-task-btn" ).click(function() {
        $( ".add-task-bar" ).toggleClass( "hidden" );
    });

    $( ".main-section" ).click(function() {
        $( ".details" ).toggleClass( "hidden" );
    });

    $( "#clandar, .set-due-date" ).hover(function() {
        $( ".set-due-date" ).toggleClass( "hidden" );
    });
})
＆＃13; 
* {
    box-sizing: border-box;
}

body{
    color: #fff;
    position: relative;
    left: 0;
    right: 0;
    z-index: 0;
    font-family: 'Open Sans', sans-serif;
}

body:before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    z-index: -1;

    background: url(../img/bg-1.jpeg) no-repeat center center;
    background-size: cover;
    height: 100%;

    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}

a{
    text-decoration: none;
}
.fa-star,.fa-map-marker {
    color: #9596a4;
}


.container{
    width: 600px;
    margin: 15px auto;
    overflow: hidden;
    position: relative;
}

.hidden{
    display: none;
}


/**********************************
    * Grid
**********************************/

[class*="col-"] {
    float: left;

}

.row:after {
    content: "";
    clear: both;
    display: block;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.col-off-2 > .col-2{width: 11.66%;}
.col-off-10 > .col-10{width: 88.33%; }

/**********************************
          * Tiltle bar
**********************************/
header{
    background-color: rgba(255, 255, 255, 0.3);
    text-align: center;
    position: relative;
}

.header-bar-buttons {
    float: left;
    margin: 18px;
}

.header-bar-buttons a {
    width: 11px;
    height: 11px;
    float: left;
    margin: 0 2px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 10px;
}

.header-all-tasks {
    display: inline-block;
    margin: 35px 0 10px 0;
    font-size: 18px;
    color: #ffffff;
}

.header-btn {
    float: right;
    margin: 35px 16px 10px 0;
}

.header-btn span {
    color: rgba(255, 255, 255, 0.5);
    margin: 0 8px;
}

/**********************************
          * Navigation
**********************************/

.centred-menu{
     position: relative;
     top: 40%;
     left:40%
 }

.centred-inv-menu{
    position: relative;
    top: 80%;
    left:40%
}

.menu a{
    text-decoration: none;
    display: block;
    color: #CFC4CD;
}

.nav-btn-1{
    background-color: #55566e;
    height: 70px;
}

.nav-btn-2{
    background-color: #ff5f65;
    height: 70px;
}

.nav-btn-3{
    background-color: #fdcd63;
    height: 70px;
}

.nav-btn-4{
    background-color: #d575f8;
    height: 70px;
}

.nav-btn-5{
    background-color: #00eeb8;
    height: 70px;
}

.nav-inv-btn{
    background-color: rgba(52, 63, 70, 0.5);
    
}

/**********************************
     * Task list global classes
**********************************/

.task-link{
    color: #ffffff;
}

.checkbox{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4c4b62;
    border-bottom: 1px solid rgba(233, 233, 233, 1);
}

.box {
    border-bottom: 1px solid rgba(233, 233, 233, 1);
    background-color: #55566E;
}

.inv{
    opacity: 0.6;
}

.flex-height{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

}



/**********************************
          * Main taks
**********************************/
.box h1{
    clear: both;
    font-size: 44px;
    margin: 35px 0 0;
    color: #ffffff;
}
.task-1{
    border-right: 10px solid #ff5f65;
    border-bottom: 1px solid rgba(233, 233, 233, 1);
}

/**********************************
          * small-task
**********************************/

.task-content-small{
    padding: 25px 30px 15px 30px;
}
.location-and-date-small{
    margin: 0;
    font-size: 10px;
}

.task-name {
    margin: 23px 0 0;
    line-height: 1.5;
    font-size: 15px;
}


/**********************************
          * seconday-section
**********************************/



.task-content {
    padding: 25px 35px 15px 25px;
    position: relative;
}

.favourite {
    float: right;
}

.location-and-date {
    color: #9596a4;
    float: left;
    font-weight: bold;
    font-size: 12px;
    margin: 5px;
}

.location-and-date-small {
    margin: 0;
    font-size: 10px;
}


/**********************************
          * color
**********************************/

.active{
    border-left: 1px solid #ff5f65;
    border-bottom: 1px solid white;
    border-right: 10px solid #fdcd63;;
}

.purple{
    border-right: 10px solid #d575f8;
}

.inv-red{
    border-right: 10px solid #ff5f65;
}

.inv-purple{
    border-right: 10px solid #9B79AB;
}
.inv-yell{
    border-right: 10px solid #C2B28A;
}

.green{
    border-bottom: 1px solid rgba(233, 233, 233, 1);
    border-right: 10px solid #00eeb8;
    height: 153px;

}

.green-top{
    border-top: 10px solid #00eeb8;

}


/**********************************
          *Search bar
**********************************/

.search-bar, .add-task-bar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10;
    padding: 30px;
    text-align: left;
}

.search-bar input {
    width: 90%;
    background-color: rgba(255, 255, 255, 0);
    border: none;
    color: #fff;
    font-size: 30px;
    margin: 0 0 0 15px;

}
.search-bar span {
    color: rgba(255, 255, 255, 0.5);
}


/**********************************
          *Add Task
**********************************/
.add-task-bar {
    padding: 0;
}

.add-new-task {
    color: rgba(255, 255, 255, 0.8);
    vertical-align: middle;
    padding: 30px;
}

.add-new-task:last-child {
    background-color: rgba(0, 0, 0, 0.4);
}

.add-new-task a {
    color: rgba(255, 255, 255, 0.5);
}

.add-new-task h2 {
    font-weight: normal;
    font-size: 29px;
    float: left;
    margin: 0
}

.add-new-task p {
    float: left;
    margin: 10px 0;
}

.add-new-task div {
    float: right;
}

.select-category-icons a {
    margin: 23px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    padding: 13px;
}

.add-task-icons {
    margin: 10px 0;
}

.add-task-icons a {
    margin: 0 8px;
}

.category-button {
    color: #ff5f65;
}

.close-button {
    color: rgba(255, 255, 255, 0.8);
}

.selected-arrow-add-task::before {
    top: 49px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 13px solid rgba(0, 0, 0, 0.4);
}

.home-button{
    background-color: #ff5f65 ;
}

.briefcase-button{
    background-color: #C2B28A;
}

.screen-button{
        background-color: #D575F8;
}

/**********************************
          *Task detiles Add
**********************************/

.task-details {
  position: absolute;
  top: 69px;
  bottom: 0;
  right: 0;
  background-color: #55566e;
    z-index: 20;
}

.task-details-border{
    border-bottom: 1px solid #9596a4;
}


.checkbox-empty{
    background-color: #55566e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-details-block a {
  text-decoration: none;
  color: #9596a4;
}

.task-details p {
  font-weight: bold;
  font-size: 12px;
}

.paperclip {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.upper-content::after {
  height: 10px;
  width: 100%;;
}

.task-content-details {
  padding: 20px 20px 20px 10px;
}

.task-content-details-small {
  padding: 0 0 0 10px;
}

.teal-content {
  color: #00eeb8;
}

/**********************************
          *Clander
**********************************/



.set-due-date {
    position: absolute;
    right: 0%;
    top: 15%;
    background-color: #fff;
    color: #4f5064;
    text-align: center;
}

.back-ground-inv {
    position: absolute;
    top: 12%;
    bottom: 0;
    right: 300px;
    background-color: rgba(85, 86, 110, 0.57);
    z-index: 20;
    /* opacity: 0.7; */
}

.prev-next-month {
    color: #cfcfd3;
}

.calendar-controls,
.calendar-header {
    background-color: #ecedf7;
    padding: 10px;
}

.calendar-controls span {
    margin: 0 5px;
    font-weight: bold;
}

.calendar-header {
    border-left: 11px solid #ecedf7;
    border-right: 11px solid #ecedf7;
}

.calendar-body {
    border-bottom: 11px solid #fff;
    border-left: 11px solid #fff;
    border-right: 11px solid #fff;
    border-top: 12px solid #fff;
}

.calendar {
    font-size: 11px;
}

.calendar td {
    padding: 7px;
}

.calendar th {
    text-transform: uppercase;
    padding: 0 5px 10px 5px;
    font-size: 9px;
}

.cell-border,
.cell-background {
    border-radius: 50%;
    padding: 3px;
}

.cell-border {
    border: 1px solid red;
}

.cell-background {
    background-color: #dce0e4;
}

.selected-arrow-details::before {
    left: 0;
    top: 45%;
    border-top: 5px solid transparent;
    border-left: 6px solid #fff;
    border-bottom: 5px solid transparent;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>To Do List</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="container">
    <header class="row">
      <div class="col-12">
        <div class="header-bar-buttons">
          <a href="#"></a>
          <a href="#"></a>
          <a href="#"></a>
        </div>
        <div class="hidden search-bar">
          <a href="#" alt="Search"><span class="fa fa-search fa-2x"></span></a>
          <input type="text" name="search" value="" autofocus="">
        </div>
        <div class="hidden add-task-bar">
          <div class="add-new-task clearfix">
            <h2>Add a new task</h2>
            <div class="add-task-icons">
              <a href="#"><span class="fa fa-star-o fa-lg"></span></a>
              <a href="#"><span class="fa fa-calendar fa-lg"></span></a>
              <a href="#" class="selected-arrow-position selected-arrow selected-arrow-add-task"><span class="fa fa-circle fa-lg category-button"></span></a>
            </div>
          </div>
          <div class="add-new-task clearfix">
            <p>
              Select a category
            </p>
            <div class="select-category-icons">
              <a href="#" class="home-button"><span class=" fa fa-home"></span></a>
              <a href="#" class="briefcase-button checked"><span class=" fa fa-briefcase"></span></a>
              <a href="#" class="screen-button checked"><span class=" fa fa-desktop"></span></a>
              <a href="#" class="users-button checked"><span class=" fa fa-users"></span></a>
            </div>
          </div>
        </div>
        <h3 class="header-all-tasks">All tasks</h3>
        <div class="header-btn">
          <span class="fa fa-search fa-lg search-btn"></span>
          <span class="fa fa-plus-circle fa-lg add-task-btn"></span>
        </div>
      </div>
    </header>
    <main class="row col-off-2 col-off-10">
      <nav class="menu col-2">
        <a href="#" class="nav-btn-1"><span class="centred-menu nav-icon fa fa-inbox fa-lg"></span></a>
        <a href="#" class="nav-btn-2"><span class="centred-menu nav-icon fa fa-home fa-lg"></span></a>
        <a href="#" class="nav-btn-3"><span class="centred-menu nav-icon fa fa-briefcase fa-lg"></span></a>
        <a href="#" class="nav-btn-4"><span class="centred-menu nav-icon fa fa-desktop fa-lg"></span></a>
        <a href="#" class="nav-btn-5"><span class="centred-menu nav-icon fa fa-users fa-lg"></span></a>
        <a href="#" class="nav-inv-btn autoheight "><span class="centred-inv-menu nav-icon fa fa-cog fa-lg"></span></a>
      </nav>
      <article class="col-10 autoheight">
        <section class="main-section flex-height row">
          <div class="checkbox col-1 ">
            <span class="centered fa fa-circle-thin fa-lg"></span>
          </div>
          <div class=" task-content box col-11 task-1">
            <p class="location-and-date"><a href="#"><span class="fa fa-map-marker fa-lg"></span></a> At Tesco | Next monday</p><a href="#" class="favourite"><span class="fa fa-star"></span></a>
            <h1><a href="details.html" class="task-link">Buy a new better toothbrush</a></h1>
          </div>
          <section class="details hidden row">
            <div class="col-6 back-ground-inv">
              <div class="set-due-date hidden">
                <div class="calendar-controls">
                  <span><a href="#">&lt;</a></span>
                  <span>September</span>
                  <span><a href="#">&gt;</a></span>
                </div>
                <table class="calendar">
                  <thead class="calendar-header">
                    <tr>
                      <th>mon</th>
                      <th>tue</th>
                      <th>wed</th>
                      <th>thu</th>
                      <th>fri</th>
                      <th>sat</th>
                      <th>sun</th>
                    </tr>
                  </thead>
                  <tbody class="calendar-body">
                    <tr>
                      <td class="prev-next-month">24</td>
                      <td class="prev-next-month">25</td>
                      <td class="prev-next-month">26</td>
                      <td class="prev-next-month">27</td>
                      <td class="prev-next-month">28</td>
                      <td><a href="#">1</a></td>
                      <td><a href="#">2</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">3</a></td>
                      <td><a href="#">4</a></td>
                      <td><a href="#">5</a></td>
                      <td><a href="#">6</a></td>
                      <td><a href="#">7</a></td>
                      <td><a href="#">8</a></td>
                      <td><a href="#">9</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">10</a></td>
                      <td><a href="#">11</a></td>
                      <td><a href="#" class="cell-border">12</a></td>
                      <td><a href="#">13</a></td>
                      <td><a href="#" class="cell-background">14</a></td>
                      <td><a href="#">15</a></td>
                      <td><a href="#">16</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">17</a></td>
                      <td><a href="#">18</a></td>
                      <td><a href="#">19</a></td>
                      <td><a href="#">20</a></td>
                      <td><a href="#">21</a></td>
                      <td><a href="#">22</a></td>
                      <td><a href="#">23</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">24</a></td>
                      <td><a href="#">25</a></td>
                      <td><a href="#">26</a></td>
                      <td><a href="#">27</a></td>
                      <td><a href="#">28</a></td>
                      <td class="prev-next-month">1</td>
                      <td class="prev-next-month">2</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="col-6 task-details">
              <div class="task-details-block flex-height">
                <div class="col-1 checkbox-empty green-top task-details-border">
                  <span class="centered fa fa-circle-thin fa-lg"></span>
                </div>
                <div class="col-11 task-details-border">
                  <div class=" task-content-details green-top">
                    <h2>Buy a new toothbrush</h2>
                    <a href="#" class="favourite"><span class="fa fa-star-o"></span></a>
                  </div>
                </div>
              </div>
              <div id="clandar" class="task-details-block flex-height">
                <div class="col-1 checkbox-empty task-details-border ">
                  <span class="centered fa fa-calendar fa-lg"></span>
                </div>
                <div class="col-11 task-details-border">
                  <div class="task-content-details-small task-content-details">
                    <p>Set a due date</p>
                  </div>
                </div>
              </div>
              <div class="task-details-block flex-height">
                <div class="col-1 checkbox-empty task-details-border flex-height">
                  <span class=" fa fa-clock-o fa-lg"></span>
                </div>
                <div class="col-11 task-details-border flex-height">
                  <div class="task-content-details-small task-content-details">
                    <p>Set a reminder</p>
                  </div>
                </div>
              </div>
              <div class="task-details-block flex-height">
                <div class="col-1 checkbox-empty task-details-border ">
                  <span class=" teal-content fa fa-circle fa-lg"></span>
                </div>
                <div class="col-11 task-details-border">
                  <div class="task-content-details-small task-content-details">
                    <p>Work</p>
                  </div>
                </div>
              </div>
              <div class="task-details-block flex-height">
                <div class="col-1 checkbox-empty task-details-border ">
                  <span class=" fa fa-edit fa-lg"></span>
                </div>
                <div class="col-11 task-details-border">
                  <div class="task-content-details-small task-content-details">
                    <p>Add note</p>
                  </div>
                </div>
              </div>
              <div class="paperclip">
                <a href="#"><span class="fa fa-paperclip fa-lg"></span></a>
              </div>
            </div>
          </section>
        </section>
        <section class="seconday-section row">
          <section class="a-side col-6">
            <div class="left-task flex-height">
              <div class="checkbox   col-2">
                <span class="centered fa fa-circle-thin fa-lg"></span>
              </div>
              <div class="task-content-small active  box small-box col-10">
                <p class="location-and-date location-and-date-small">Tomorrow</p>
                <p class="task-name"><a href="#" class="task-link">Clean my roomm</a></p>
              </div>
            </div>
            <div class="left-task flex-height">
              <div class="checkbox   col-2">
                <span class="centered fa fa-circle-thin fa-lg"></span>
              </div>
              <div class="task-content-small  box small-box col-10 purple">
                <p class="location-and-date location-and-date-small">18. September 2013</p>
                <p class="task-name"><a href="#" class="task-link">Do a homework from ipsum dolor amet,
                                consectetur adipiscing</a></p>
              </div>
            </div>
            <div class="left-task flex-height inv">
              <div class="checkbox   col-2">
                <span class=" fa fa-check-circle fa-lg"></span>
              </div>
              <div class="task-content-small  box small-box col-10 inv-red">
                <p class="location-and-date location-and-date-small">Yesterday</p>
                <p class="task-name"><a href="#" class="task-link">Buy a milk</a></p>
              </div>
            </div>
          </section>
          <section class="b-side col-6">
            <div class="left-task flex-height">
              <div class="checkbox   col-2">
                <span class="centered fa fa-circle-thin fa-lg"></span>
              </div>
              <div class="task-content-small  box small-box col-10 green">
                <p class="location-and-date location-and-date-small">14. September 2013</p>
                <p class="task-name"><a href="#" class="task-link">Clean the house and mauris pretium purus
                                id sapien consectetur</a></p>
              </div>
            </div>
            <div class="left-task inv flex-height">
              <div class="checkbox   col-2">
                <span class=" fa fa-check-circle fa-lg"></span>
              </div>
              <div class="task-content-small  box small-box col-10 inv-purple">
                <p class="location-and-date location-and-date-small">5. October 2013</p>
                <p class="task-name"><a href="#" class="task-link">5. October 2013</a></p>
              </div>
            </div>
            <div class="left-task inv flex-height">
              <div class="checkbox   col-2">
                <span class=" fa fa-check-circle fa-lg"></span>
              </div>
              <div class="task-content-small  box small-box col-10 inv-yell">
                <p class="location-and-date location-and-date-small">5. October 2013</p>
                <p class="task-name"><a href="#" class="task-link">Call to Jakub Antalik</a></p>
              </div>
            </div>
          </section>
        </section>
      </article>
    </main>
  </div>

  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="js/script.js"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

CodePen

1 个答案:

答案 0 :(得分：0)

您需要做一些调整。

我使用内联样式仅用于演示目的。

首先，定义容器的高度：

<main class="row col-off-2 col-off-10" style="height: 529px;">

我使用了529px，因为这是元素的自然高度。

其次，将nav元素设为带有column方向的弹散框，height等于容器高度：

<nav class="menu col-2" style="display: flex; flex-direction: column; height: 100%;">

您可能需要修改高度。如果100％不准确，请尝试93.5％。

第三，使用flex-grow属性告诉最后nav项占用所有可用空间。

<a href="#" class="nav-inv-btn autoheight" style="flex-grow: 1;">

DEMO：http://codepen.io/anon/pen/rOjdYg

相关问题
最新问题