CSS：从 3 切换到 2，然后切换到 1 列，并在彼此的底部对齐元素

Question

这是我的第一个问题，

我正在尝试制作一个模板，除了 header、nav 和页脚为：

1) 以上三栏950px（已完成）

2) @media screen and (max-width: 950px) and (min-width: 651px)

两列

3) @media 屏幕的一列和 (max-width: 650px) （已经通过使用 flexbox 切换项目的顺序来完成）

我遇到的问题是第 2) 个，因为小部件 "CSS Links" 没有在 "HTML Links" 之下，但是有很多无用的 space，正如您在 651px 和此模板的 950 像素：

在这里你可以看到左下角的元素：

https://atheerhuwaish.github.io/2

如何通过 flexbox 或使用 float 使它们相互重叠？

HTML

body{margin:2%;
 background-color:rgba(49,119,195,0.7);
  }
  
#container{margin:2%;
 display:flex;
 flex-wrap: wrap;
 background-color:rgba(79,59,105,0.7);
  color:white;
 }
  
    
footer, header{order:1;
width:100%;
height:20px;
  text-align:center;
  background-color:rgba(179,59,105,0.7);
 }

nav{order:2;
height:20px
 text-align: center;
  background-color:rgba(149,59,195,0.7);
 width:100%
}


h1,h2,h3,h4,nav,aside{text-align: center;}

 
aside.aside1{order:3;}
aside.aside2{order: 5;}


main{order:4;
 width: 58%;
 margin: 0 auto;
 background-color:rgba(244,244,255,0.9);
}
  

footer{order:6;
 background-color:rgba(99,119,145,.8);
 margin: 2% auto;
 width:100%;
 }

ul li {list-style: none;}


aside{
 background-color:rgba(244,244,255,0.9);
 padding:3% 0;
 margin: 0;
 height:100%;
 width: 20%
  }

  
aside li {text-align:center;
  padding: 4% 0;
  margin: 4% 0
   }

aside li b{background-color: #c9c9dd;
  padding: 4% 1%;
  display:inline-block;
  width:90%
    }
    
    

@media screen and (max-width: 950px) and (min-width: 651px)
{

 #container{margin: 0;}
 .aside1{flex-basis:25%;}
 .aside2{flex-basis:25%;}
 main{flex-basis:73%;}

}


  
  
@media screen and (max-width: 650px) 
{

aside.aside1{width:46%; margin:0; padding: 1%}
aside.aside2{order:4; width:46%; margin: 0 0 1% 4%; padding: 1%} 



main{order: 5;
 width:100%;
  margin: 5px 0 0 0}

<body>
<div id="container">

 <header>
        header
  </header>
  
  <nav>
    nav
 </nav>

 
 <aside class="aside1">
  <ul><li>
           <b><a href="#">HTML Links</a></b>  
   </li>
  </ul>
 </aside>

 
 <aside class="aside2">
    <ul><li>
     <b><a href="#">CSS Links</a></b>
   </li></ul>
 </aside>
  
  <main>
      <p style="height:500px"></p>
  </main>
  
  <footer>
        footer
  </footer>
  </div>
  </body>

谢谢！

Answer 1

所以我不确定使用 flexbox 和顺序命令是否是您所需要的，但这里有一个替代方案，它确实按照您提到的尺寸进入 3 列、2 列，然后 1 列。

我认为问题是顺序不能很好地改变布局，但使用浮点数和宽度你可以做到：[

aside.aside1 {
order: 3;
}

]
https://codepen.io/FEARtheMoose/pen/BONBzg?editors=1100

它有些基础，您可以微调 css 以获得您想要的宽度和对齐方式。

编辑：

将此添加到媒体屏幕 650 最大值：

.clearfix {
    display:flex;
    flex-wrap:wrap;
}
.one-fourth,
  .two-fourths {
    float:none;
    width:100%;

  }
  .one-fourth.first {
    order:1;
  }
  .one-fourth.last {
    order:2;
  }
  .two-fourths {
    order:3;
  }
}

CSS：从 3 切换到 2，然后切换到 1 列，并在彼此的底部对齐元素

CSS: switch from 3 to 2 then to 1 column and aligning elements at the bottom of each other

css

css-float

flexbox