html – 使用Flexbox,使元素伸展以填补行之间的差距

概述我觉得有点愚蠢地问这个问题,但是我对Flexboxes的了解已经很多了,所以我希望有人可以进来帮助我. 我的总体目标是让中间的两个项目拉伸,以填补标题和项目之间的空间,我已经搜索过,老实说不能弄清楚我应该做什么.我从CSS Tricks Guide开始了代码,最底层的代码,我做了一些改动.我目前的代码是(以全屏模式打开,使其更加清晰)： body,html { height: 100%;} 我觉得有点愚蠢地问这个问题,但是我对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 >  <header >header</header>  <article >    <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 >AsIDe 1</asIDe>  <footer >Footer</footer></div>

在不改变HTML的情况下,flexBox可以实现这一点,还是应该寻找另一种方式来实现这一目标？

解决方法 这个想法是将它们包装在一个容器上,并使用flex-grow：1;在该容器上,这将使容器填充页眉和页脚之间的空间.

然后在@media查询中,将此容器的flex-direction更改为row.这将使大屏幕旁边并排.

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 >  <header >header</header>  <div >  <article >    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,ante. Donec eu libero sit amet quam egestas semper. Aenean ultricIEs mi vitae est.      Mauris placerat eleifend leo.</p>  </article>  <asIDe >AsIDe 1</asIDe>    </div>  <footer >Footer</footer></div>

总结

以上是内存溢出为你收集整理的html – 使用Flexbox,使元素伸展以填补行之间的差距全部内容，希望文章能够帮你解决html – 使用Flexbox,使元素伸展以填补行之间的差距所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。