特殊顺序时可灵活定位侧边栏

如何解决特殊顺序时可灵活定位侧边栏

我有一个简单的2列布局，包含3个部分。根据媒体查询，我想更改它们的顺序-为此，我正在使用flex order。

除了我在第一个部分的末尾或者类似的地方得到了狭窄的侧边栏部分之外，这个方法还不错。有什么办法可以让他们更像拼图碎片？

HTML：

<div class="page-wrapper">
  <div class="container">
    <div class="box1">
      BOX 1
    </div>

    <div class="box2">
      BOX 2
    </div>

    <div class="box3">
      BOX 3 Sidebar
    </div>
  </div>
</div>

CSS：

.page-wrapper{
  width:100%;
  max-width:500px;
  margin:0 auto;
 
}
.container{
 display:flex;
 flex-wrap:wrap;
}
.box1{
  display:inline-block;
  background:red;
  width:70%;
  height:400px;
  order:1;
}
.box2{
  display:inline-block;
  background:green;
  width:70%;
  height:150px;
  order:2;
}
.box3{
  display:inline-block;
  background:grey;
  width:30%;
  height:600px;
  order:3;
}

我想要的方式：

（我知道这样做可以更简单，但是我的想法是，我可以使用媒体查询来更改顺序，例如在移动设备中，我想要一列，并且它们以不同的顺序。）

网格尝试：https://jsfiddle.net/w489b2fj/

解决方法

您可以通过向容器添加flex-direction: column;来实现。但是在这种情况下（为了包装物品），您还需要设置一个固定的height，在您的情况下为height: 550px;。

实际上，在这种简单情况下，您不需要为弹性项目设置order ...

.page-wrapper {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 550px;
}

.box1 {
  display: inline-block;
  background: red;
  width: 70%;
  height: 400px;
  order: 1;
}

.box2 {
  display: inline-block;
  background: green;
  width: 70%;
  height: 150px;
  order: 2;
}

.box3 {
  display: inline-block;
  background: grey;
  width: 30%;
  height: 600px;
  order: 3;
}

<div class="page-wrapper">
  <div class="container">
    <div class="box1">
      BOX 1
    </div>

    <div class="box2">
      BOX 2
    </div>

    <div class="box3">
      BOX 3 Sidebar
    </div>
  </div>
</div>

第三个元素的位置不根据第一个元素，而是根据其前任。侧边栏将占据第二个元素之后而不是第一个元素之后的剩余空间。

要获得理想的结果，我认为最好管理2个flexbox容器。第一个包括box1和box2。第二个包括盒子容器和侧边栏。

编辑HTML：

<div class="page-wrapper">
  <div class="container">
    <div class="content-wrapper">
        <div class="box1">
          BOX 1
        </div>
        <div class="box2">
          BOX 2
        </div>
    </div>
    <div class="box3">
      BOX 3 Sidebar
    </div>
  </div>
</div>

并编辑CSS：

.container,.content-wrapper{
 display:flex;
 flex-wrap:wrap;
}

.content-wrapper {
    width: 70%;
}

.box1,.box2 {
    width: 100%;
}

编辑：

好吧，有了这些新信息，我还有另一个解决方案：

.container {
  position: relative;
}

.box3 {
  position: absolute;
  top: 0;
  right: 0;
}

您想要使用CSS网格的答案，其中box3在移动视口中的box1和box2之间。您在这里：

.container{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 
  "box1"
  "box3"
  "box2"
}

@media (min-width:768px){
  .container{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
    "box1 box3"
    "box2 box3"
  }
}

.box1{
  grid-area: box1;
  background-color: #f00;
}

.box2{
  grid-area: box2;
  background-color: #0f0;
}

.box3{
  grid-area: box3;
  background-color: #00f;
}

<div class="page-wrapper">
  <div class="container">
    <div class="box1">
      BOX 1
    </div>

    <div class="box2">
      BOX 2
    </div>

    <div class="box3">
      BOX 3 Sidebar
    </div>
  </div>
</div>

尝试使用position属性，并将框相对于页面包装器放置。

如果您可以更改HTML（并始终保持良好的结构），请尝试以下操作：
在c1和c2元素上执行flex操作，您只需删除所有内联块指令

<div class="page-wrapper">
  <div class="container">
  <div class=c1>
    <div class="box1">
      BOX 1
    </div>

    <div class="box2">
      BOX 2
    </div>
  </div>
  <div class=c2>
    <div class="box3">
      BOX 3 Sidebar
    </div>
</div>
</div>

和CSS：

.page-wrapper{
  width:100%;
  max-width:500px;
  margin:0 auto;
 
}
.container{
 display:flex;
}
.box1{
  background:red;
  height:200px;
  order:2;
}
.box2{
  background:green;
  height:150px;
  order:1;
}
.box3{

  background:grey;
  width:100%;
  height:400px;
}
.c2{
  
  width:30%;
  flex-basis:1;
}
.c1{
  display:flex;
  flex-direction:column;
  width:70%;
  flex-basis:1;
}

特殊顺序时可灵活定位侧边栏

如何解决特殊顺序时可灵活定位侧边栏

解决方法

相关推荐