响应，双列布局：在其他列之间移动一列 [英] Responsive, two-column layout: Move one column in between other column

问题描述

我有一个响应式网站，在大浏览器窗口中有两列布局。两列布局目前是使用float实现的。在较小的屏幕上，我想只有一列。另一列的内容应该显示在主列的两个元素之间，如下所示：

 < div class =two-columns> 
< div class =main-column> 
< div class =red-element>< / div> 
< div class =yellow-element>< / div> 
< / div> 
< div class =sidebar-column> 
< div class =green-element>< / div> 
< / div> 
< / div> 
  

我尝试使用基于弹性框的方法，基本上是此问题中描述的，但 flex-basis在 flex-direction 是 column 时，Safari仍然不支持。正确的Safari支持是必须的，因为Safari是我的访问者的主要浏览器。

有没有办法使用CSS，而不必放置绿色元素两次

解决方案

这里是使用一个flex容器的一般解决方案：

 < div class =container> 
< div class =box> ...< / div><！ -  red box  - > 
< div class =box> ...< / div><！ -  green box  - > 
< div class =box> ...< / div><！ -  yellow box  - > 
< / div> 
  

---

从小萤幕开始，将它们堆叠在一列中：

  .container {
 display：flex; 
 flex-direction：column; 
} 
 
 .box {
 height：100px; 
 width：100％; 
} 
  

---

重新排列布局更宽的屏幕：

  @media（min-width：800px）{
 
 .container {
 flex-direction：row; 
 flex-wrap：wrap; 
} 
 
 .box {
 flex-basis：45％; 
} 
} 
  

在大于800px的屏幕上，并且能够包装。每个盒子都有足够大的宽度（ flex-basis ），只有两个适合一行。

---

完整演示：

  * {box-sizing：border-box;}。 ： 柔性; flex-direction：column; padding：5px 0; background-color：＃f5f5f5; border：1px solid #aaa;}。box1 {background-color：red; } .box2 {background-color：lightgreen; } .box3 {background-color：yellow; } .box {height：100px; / *`flex-basis：100px`也会工作* / width：calc（100％ -  20px）; margin：5px 10px; border：1px solid #ccc;显示：flex; justify-content：center; align-items：center; font-size：1.2em;} @ media（min-width：800px）{.container {flex-direction：row; flex-wrap：wrap; } .box {flex-basis：45％; }}  

 < div class =container < div class =box box1>< span> 1< / span>< / div> < div class =box box2>< span> 2< / span>< / div> < div class =box box3>< span> 3< / span>< / div>< / div>  

jsFiddle

---

根据您的问题：

... flex-direction 是列 code>




我不确定这是否正确（



但是，您始终可以使用 width（＃search = flex-basis =nofollow> caniuse.com ） 或或属性而不是 flex-basis （更多细节：弹性基础和宽度之间的差异是什么？）。

I have a responsive website with a two-column layout in large browser windows. The two-column layout is currently implemented using float. On smaller screens I'd like to have just one column. The content of the other column should be displayed between the two elements of the main column, like shown here:

<div class="two-columns">
  <div class="main-column">
    <div class="red-element"></div>
    <div class="yellow-element"></div>
  </div>
  <div class="sidebar-column">
    <div class="green-element"></div>
  </div>
</div>

I tried using a flex-box-based approach, basically the one described in this question, but flex-basis still seems to be unsupported in Safari when flex-direction is column. Proper Safari support is a must as Safari is the main browser of my visitors.

Is there a way this can be achieved using CSS only without having to place the green element twice in my markup?

解决方案

Here's a general solution using one flex container:

<div class="container">
    <div class="box"> ... </div><!-- red box -->
    <div class="box"> ... </div><!-- green box -->
    <div class="box"> ... </div><!-- yellow box -->
</div>

---

Starting with small screens (for no particular reason), stack them in a column:

.container {
    display: flex;
    flex-direction: column;
}

.box {
    height: 100px;
    width: 100%;
}

---

Re-arrange the layout for wider screens:

@media (min-width: 800px) {

   .container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .box {
        flex-basis: 45%;
    }
}

On screens wider than 800px, the container lines the items in a row and enables wrapping. Each box is given a large enough width (flex-basis) for only two to fit on a line.

---

Full demo:

* {
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-direction: column;
    padding: 5px 0;
    background-color: #f5f5f5;
    border: 1px solid #aaa;
}

.box1 { background-color: red; }
.box2 { background-color: lightgreen; }
.box3 { background-color: yellow; }

.box {
    height: 100px;   /* `flex-basis: 100px` would also work */
    width: calc(100% - 20px);
    margin: 5px 10px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

@media (min-width: 800px) {
    .container {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .box {
        flex-basis: 45%;
    }
}

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
</div>

jsFiddle

---

From your question:

...but flex-basis still seems to be unsupported in Safari when flex-direction is column

I'm not sure this is correct (caniuse.com).

However, you can always use width or height properties instead of flex-basis (more details: What are the differences between flex-basis and width?).

这篇关于响应，双列布局：在其他列之间移动一列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！