如何使用Flexbox将一列中的两个框对齐,在一行旁边?

时间:2017-07-18 01:30:11

标签: html css css3 layout flexbox

我想做的是非常特别的,所以我画了一张图片来说明它:

the desired behavior

我可以轻松实现这个:

enter image description here

但在这个网站上看起来不太好,因为E元素比C或D高得多。

我想要的是,当浏览器窗口很宽时,C和D是堆叠的,而不是当它是中等宽度时。

我正在尝试使用CSS和Flexbox实现这一点,并且我尝试将div和C中的C和D组合在一起,但这会在介质布局中产生问题。

2 个答案:

答案 0 :(得分:1)

Flexbox是1D布局。当然你可以添加一些嵌套,一些固定的高度,但它是1D并且在这里不是完美的解决方案。

这里使用CSS网格布局要好得多,因为它是2D布局。

.grid {
  display: grid;
}

/* just styles for demo */
.grid__item {
  font-size: 3em;
  padding: 20px;
  background-color: orange;
  color: white;
  margin: 10px;
  
  /* using flexbox for text centering */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* medium screen */
@media screen and (min-width: 700px) and (max-width: 999px) {
  .a {
    grid-column: 1 / span 2;
  }
}

/* wide screen */
@media screen and (min-width: 1000px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  .a {
    grid-column: 1 / span 2;
  }
  
  .d {
    grid-row: 3;
  }
  
  .e {
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
  }
}
<div class="grid">
  <div class="grid__item a">A</div>
  <div class="grid__item b">B</div>
  <div class="grid__item c">C</div>
  <div class="grid__item d">D</div>
  <div class="grid__item e">E</div>
</div>

如果您需要IE / Edge支持,则必须使用过时的语法并手动为每一行指定位置。 IE / Edge实现没有网格单元自动放置。因此,如果您没有为每个单元格指定grid-column / grid-row,那么它们将在第一个单元格中堆叠。因此,对于IE / Edge -ms-grid-row-ms-grid-column,默认值为1. Demo:

.grid {
  display: grid;
}

/* just styles for demo */
.grid__item {
  font-size: 3em;
  padding: 20px;
  background-color: orange;
  color: white;
  margin: 10px;
  
  /* using flexbox for text centering */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* medium screen */
@media screen and (min-width: 700px) and (max-width: 999px) {
  .grid {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr;
  }
  
  .a {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / span 2;
  }
  
  .b {
    -ms-grid-row: 2;
  }
  
  .c {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
  
  .d {
    -ms-grid-row: 3;
  }
  
  .e {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
  }
}

/* wide screen */
@media screen and (min-width: 1000px) {
  .grid {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  .a {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / span 2;
  }
  
  .b {
    -ms-grid-column: 3;
  }
  
  .c {
    -ms-grid-row: 2;
  }
  
  .d {
    -ms-grid-row: 3;
    grid-row: 3;
  }
  
  .e {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2 / span 2;
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2 / span 2;
  }
}
<div class="grid">
  <div class="grid__item a">A</div>
  <div class="grid__item b">B</div>
  <div class="grid__item c">C</div>
  <div class="grid__item d">D</div>
  <div class="grid__item e">E</div>
</div>

如果您想测试调整大小,请jsFiddle

答案 1 :(得分:0)

demo

根据需要更改弹性值

&#13;
&#13;
.box {
  background-color: green;
  margin: 5px; 
  /* padding: 30px; */
}

.one {
   display: flex; 

}

.a {
  flex: 3;
}

.b {
  flex: 2;
}

.two {
  display: flex;
  
}

.three {
  flex: 2;
}

.four {
  flex: 3;
}
&#13;
<div class="main">
    <div class="one">
        <div class="a box">a</div>
        <div class="b box">b</div>
    </div>
    <div class="two">
        <div class="three">
            <div class="c box">c</div>
            <div class="d box">d</div>
        </div>
        <div class="four box">
            <div class="e">e</div>
        </div>
    </div>

</div>
&#13;
&#13;
&#13;