作者：扈菁雄佳纯 | 来源：互联网 | 2023-02-13 20:49
我觉得有点傻问这个,但是我对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;
}
Header
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.
Flexbox是否有可能在不改变HTML的情况下实现这一目标,或者我应该寻找另一种方法来实现这一目标？
1> Ced..：
当人们告诉你如何解决问题时,他们并没有告诉你为什么你没有预期的结果.我认为这部分是因为他们中的大多数都错过了实际的问题.我觉得这很有趣.
让我先解决一些问题:
弯曲方向::实际上,它表示项目的显示方向.然而,这不准确.
现在让我们说如果方向设置为行,则意味着每个项目必须具有容器的高度,并且它们应该彼此相邻.换句话说,容器必须被视为一行,而项目是列.
.c{
display: flex;
width: 400px;
height:100px;
}
.c1{
flex-grow: 1;
background:gold;
}
.c2{
flex-grow: 1;
background:red;
}
2> ab29007..：
我们的想法是将它们包装在容器周围并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;
}
Header
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.
京公网安备 11010802041100号