html - How can I stretch this nav link in flexbox? -
i have little problem flexbox don't understand. how can stretch sidebar last link same height content boxes?
explanation image: http://postimg.org/image/f3zsn6051/
demo:
$(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" ); }); })* { 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 { 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 { 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 { margin: 23px; border-radius: 50%; position: relative; display: inline-block; padding: 13px; } .add-task-icons { margin: 10px 0; } .add-task-icons { 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 { 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; }<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 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 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 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> @ tesco | next monday</p><a href="#" class="favourite"><span class="fa fa-star"></span></a> <h1><a href="details.html" class="task-link">buy 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="#"><</a></span> <span>september</span> <span><a href="#">></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 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 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 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 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 homework 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 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 house , 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 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>
you need make few adjustments.
i'm using inline styles demo purposes only.
first, define height container:
<main class="row col-off-2 col-off-10" style="height: 529px;"> i've used 529px because natural height of element.
second, make nav element flexbox column direction, , height equal container height:
<nav class="menu col-2" style="display: flex; flex-direction: column; height: 100%;"> you may need tinker height. if 100% isn't precise, try 93.5%.
third, use flex-grow property tell last nav item take available space.
<a href="#" class="nav-inv-btn autoheight" style="flex-grow: 1;">
Comments
Post a Comment