Jhe*_*cht 10 html css css3 flexbox
我觉得有点傻问这个,但是我对Flexboxes的了解已经筋疲力尽,所以我希望别人可以进来帮助我.
我的总体目标是让中间行中的两个项目伸展以填充标题和项目之间的空间,我已经四处搜索并且老实说无法弄清楚我应该做什么.我将CSS Tricks Guide中的代码分叉,最底层的代码,我做了一些修改.我目前拥有的代码是(以全屏模式打开它以使其更清晰):
body,
html {
height: 100%;
}
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: flex-start;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
height: 100%;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 1 100%;
}
.header {
background: tomato;
height: 50px;
flex: 1 1 100%;
}
.footer {
background: lightgreen;
height: 50px;
}
.main {
text-align: left;
align-self: stretch;
background: deepskyblue;
}
.aside-1 {
background: gold;
}
.aside-2 {
background: hotpink;
}
@media all and (min-width: 600px) {
.aside {
flex: 1 auto;
}
}
@media all and (min-width: 800px) {
.main {
flex: 3 0px;
}
.aside-1 {
order: 1;
}
.main {
order: 2;
}
.aside-2 {
order: 3;
}
.footer {
order: 4;
}
}
body {
padding: 2em;
}<div class="wrapper">
<header class="header">Header</header>
<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
</article>
<aside class="aside aside-1">Aside 1</aside>
<footer class="footer">Footer</footer>
</div>Flexbox是否有可能在不改变HTML的情况下实现这一目标,或者我应该寻找另一种方法来实现这一目标？
当人们告诉你如何解决问题时,他们并没有告诉你为什么你没有预期的结果.我认为这部分是因为他们中的大多数都错过了实际的问题.我觉得这很有趣.
让我先解决一些问题:
弯曲方向::实际上,它表示项目的显示方向.然而,这不准确.
现在让我们说如果方向设置为行,则意味着每个项目必须具有容器的高度,并且它们应该彼此相邻.换句话说,容器必须被视为一行,而项目是列.
.c{
display: flex;
width: 400px;
height:100px;
}
.c1{
flex-grow: 1;
background:gold;
}
.c2{
flex-grow: 1;
background:red;
}<div class="c">
<div class="c1"></div>
<div class="c2"></div>
</div>我没有指定高度,项目填充行的高度,并像列一样堆叠在一起.
指定高度时,项目将采用您定义的高度,但不会更改行的高度:
.c{
display: flex;
width: 400px;
height: 100px;
}
.c1{
flex-grow: 1;
height: 40px;
background:gold;
}
.c2{
flex-grow: 1;
background:red;
}<div class="c">
<div class="c1"></div>
<div class="c2"></div>
</div>红色立方体仍然会产生垂直空间,因为行的高度没有改变.
flex grow:分配给不同项目的可用空间量.
.c{
display: flex;
width: 400px;
}
.c1{
flex-grow: 1;
background:gold;
}
.c2{
flex-grow: 1;
background:red;
} <div class="c">
<div class="c1">AAAAAAAAAAAAA</div>
<div class="c2"></div>
</div>尽管具有相同的flex-grow值,但这两个项目的大小不同,这是因为自由空间分布在它们之间,但黄色矩形开始时更大.
首先让我们使用flex-wrap:wrap:
.c{
display: flex;
flex-wrap: wrap;
border: 1px solid black;
width: 400px;
height:100px;
}
.c1{
width:200px;
background:gold;
}
.c2{
width:200px;
background:red;
}
.c3{
width:100px;
background:orange;
}
.c4{
width:300px;
background:green;
}<div class="c">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>正如我们所看到的,当我们超出可用宽度的数量时,项目开始,有效地创建另一行.
现在来解决你的问题:
如果我们采用上面的例子并设置第一项的高度怎么办？让我们来看看:
.c{
display: flex;
flex-wrap: wrap;
border: 1px solid black;
width: 400px;
height:100px;
}
.c1{
width:200px;
height: 30px;
background:gold;
}
.c2{
width:200px;
background:red;
}
.c3{
width:200px;
background:orange;
}
.c4{
width:200px;
background:green;
}<div class="c">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>就像你的片段一样.
让我们看另一个例子:
.c{
display: flex;
flex-wrap: wrap;
border: 1px solid black;
width: 600px;
height:100px;
}
.c1{
width:400px;
height: 35px;
background:gold;
}
.c2{
width:200px;
background:red;
}
.c3{
width:200px;
background:orange;
}
.c4{
width:200px;
background:green;
}
.c5{
width:200px;
background:purple;
} <div class="c">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
<div class="c5"></div>
</div>放置400px X 35px的黄色立方体并跨越2列,然后放置200px的红色立方体并跨越1列.
此时所有矩形的高度均为0,除了第一个具有35px的矩形.
剩余的垂直空间在行之间划分,以产生整个垂直空间.因此剩余的垂直空间是100-35 = 65px.分为2行= 32.5.第一行得到35 + 32.5,第二行得到32.5px高度.
另一个让事情更清晰的例子:
.c, .d{
display: flex;
flex-wrap: wrap;
border: 1px solid black;
width: 600px;
height:100px;
}
.c1{
flex-shrink: 0;
width:400px;
height: 0px;
background:gold;
}
.c2{
width:200px;
background:red;
}
.c3{
width:200px;
background:orange;
}
.c4{
width:200px;
background:green;
}
.c5{
width:200px;
background:purple;
}
.d1{
width:400px;
height: 50px;
background:gold;
}
.d2{
width:200px;
background:red;
}
.d3{
width:200px;
background:orange;
}
.d4{
width:200px;
background:green;
}
.d5{
width:200px;
background:purple;
}First item has 0px height, the vertical space remaining (100px) is divided between the 2 rows. Both row have 50px height
<div class="c">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
<div class="c5"></div>
</div>
First item has 35px height, the vertical space remaining (65px) is divided between the 2 rows.
<div class="d">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
</div>要解决此问题,您可以使用calc()其他人建议的高度计算其他行.原因是没有更多的自由垂直空间可供共享.
.c{
display: flex;
flex-wrap: wrap;
border: 1px solid black;
width: 600px;
height:100px;
}
.c1{
width:400px;
height: 35px;
background:gold;
}
.c2{
width:200px;
background:red;
}
.c3{
height:calc(100% - 35px);
width:600px;
background:green;
}
<div class="c">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>我们的想法是将它们包装在容器周围并flex-grow:1;在该容器上使用,这将使容器填充页眉和页脚之间的空间.
然后在@media查询中,flex-direction将此容器更改为row.这将使.main和aside对大屏幕来并排.
body,
html {
height: 100%;
}
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: flex-start;
flex-direction:column;
height: 100%;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
}
.header {
background: tomato;
height: 50px;
flex-shrink:0;
}
.footer {
background: lightgreen;
height: 50px;
flex-shrink:0;
}
.main {
text-align: left;
//align-self: stretch;
background: deepskyblue;
padding:10px;
}
.main p{
margin:0;
padding:0;
}
.aside-1 {
background: gold;
}
.aside-2 {
background: hotpink;
}
.container{
width:100%;
margin:0;
padding:0;
flex-grow:1;
flex-shrink:0;
}
@media all and (min-width: 600px) {
.aside {
flex: 1 auto;
}
}
@media all and (min-width: 800px) {
.container{
display:flex;
flex-direction:row;
}
.main {
flex: 3 0px;
flex-grow:1;
flex-shrink:0;
}
.aside-1 {
order: 1;
flex-grow:1;
flex-shrink:0;
}
.main {
order: 2;
}
.aside-2 {
order: 3;
}
.footer {
order: 4;
}
}
body {
padding: 2em;
}<div class="wrapper">
<header class="header">Header</header>
<div class="container">
<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
</article>
<aside class="aside aside-1">Aside 1</aside>
</div>
<footer class="footer">Footer</footer>
</div>