flexbox嵌套:两个垂直框中的两个垂直框,带有断点

时间:2016-07-18 07:05:52

标签: css flexbox

我想在一行中4 flex个框具有相同的高度。 有一个断点,4个弹性盒应该在两行中有两个弹性盒。现在每行中的2个Flexbox应该具有相同的高度。

以下是代码:



.content {
  color: #fff;
  font-size: 20px;
  margin: 50px auto;
  max-width: 1045px;
  padding: 0;
  text-shadow: 1px 1px #000;
}
.content .fullContainer,
.content .halfContainer,
.content .quarterContainer,
.content .quarterSecondContainer {
  display: flex;
}
@media (max-width: 1075px) {
  .content .halfContainer,
  .content .quarterSecondContainer {
    display: block;
  }
}
.content .fullContainer .full {
  background-color: #ff0;
  color: #000;
  margin-bottom: 15px;
  width: 1045px;
}
@media (max-width: 1075px) {
  .content .fullContainer .full {
    width: 515px;
  }
}
.content .halfContainer .half {
  background-color: green;
  margin-bottom: 15px;
  width: 515px;
}
.content .halfContainer .half:first-child {
  margin-right: 15px;
}
@media (max-width: 1075px) {
  .content .halfContainer .half {
    display: block;
  }
  .content .halfContainer .half:first-child {
    margin-right: 0;
  }
}
.content .quarterContainer .quarter {
  background-color: pink;
  color: #fff;
  margin-bottom: 15px;
  margin-left: 15px;
  width: 250px;
}
.content .quarterContainer .first {
  margin-left: 0;
}
@media (max-width: 1075px) {
  .content .quarterContainer .firstInSecond {
    margin-left: 0;
  }
}

<div class="content">
  <div class="fullContainer">
    <div class="full">Full Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</div>
  </div>

  <div class="halfContainer">
    <div class="half">half Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</div>
    <div class="half">half Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus musLorem ipsum dolor sit amet, consectetuer adipiscing
      elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</div>
  </div>

  <div class="quarterContainer">
    <div class="quarterSecondContainer">
      <div class="quarterContainer">
        <div class="quarter first">quart</div>
        <div class="quarter">quart Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</div>
      </div>
    </div>
    <div class="quarterSecondContainer">
      <div class="quarterContainer">
        <div class="quarter firstInSecond">quart</div>
        <div class="quarter">quart</div>
      </div>
    </div>
  </div>
&#13;
&#13;
&#13;

粉红色的那个。

0 个答案:

没有答案