-3
我對柔性盒有點小問題，但是我不太明白。如何將側邊欄最後一個鏈接拉伸至與內容框相同的高度？如何在Flexbox中擴展此導航鏈接？
圖片說明：http://postimg.org/image/f3zsn6051/
演示：
$(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 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;
}<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="#"><</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 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>
關於您的標題編輯@Michael_B：有問題的項目沒有應用任何彎曲特性，所以你的編輯不正確。 – TylerH
@TylerH，我的編輯基於OP的第一段。他表示，使用flexbox他想要展開最後一個導航項。我覺得專注於該項目比列更準確。但是，如果您想恢復到編輯狀態，那很好。沒什麼大不了的。 –
@Michael_B我不認爲這樣一個小小的改變是值得的，直到OP能夠糾正這個問題的值得關注的問題，即大規模代碼轉儲 – TylerH