Flexbox: Layout with rowspan

My HTML is similar to the following example

<div id="wrapper">
 <div id="a">a</div>
 <div id="b">b</div>
 <div id="c">c</div>
 <div id="d">d</div>
</div>

On desktop I'd like the divs to display next to each other which is of course trivial.

On mobile I'd like have table-like layout with similar to the following

b, c and d have flexible height so a would have to adjust to that.

Is that possible to do without wrapping b,c and d in a separate div?

---

是的，你可以用flexbox 完全做到这flexbox ......当然，你需要在较小的视口尺寸上决定第一个div的宽度，但我认为你已经准备好了所需的媒体查询。

#wrapper {
  height: 100vh;
  width: 90vw;
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 10px auto;
}
#wrapper div {
  flex: 1 0 auto;
  border: 1px solid white;
  background: lightblue;
  text-align: center;
}
#a {
  flex-grow: 1;
  height: 100%;
  flex-basis: 50%;
}
@media screen and (min-width: 640px) {
  #a {
    height: auto;
    flex-grow: none;
    flex-basis: auto;
  }
}

<div id="wrapper">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
</div>

---

在需要时只使用flexbox：在桌面版本上：

*    { box-sizing: border-box; }
body { margin: 0; }
#a   { background: tomato; }
#b   { background: forestgreen; }
#c   { background: dodgerblue; }
#d   { background: orange; }

#wrapper {
    overflow: hidden;
    position: relative;
}
#wrapper > div {
    float: left;
    width: 50%;
    margin-left: 50%;
    padding: 5px;
}
#wrapper > #a {
    position: absolute;
    height: 100%;
    margin-left: 0;
}
@media all and (min-width: 768px) {
    #wrapper {
        display: flex;
    }
    #wrapper > div {
        margin-left: 0;
    }
    #wrapper > #a {
        position: relative;
        height: auto;
}

<div id="wrapper">
  <div id="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl.</div>
  <div id="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.</div>
  <div id="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius.</div>
  <div id="d">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.</div>
</div>

链接地址: http://www.djcxy.com/p/86448.html

上一篇: POSIX线程在C中没有产生加速

下一篇: Flexbox：带有行距的布局