代码之家 › 专栏 › 技术社区 › fightstarr20

如何在flexbox布局中组合容器?

css-grid flexbox css3 css

fightstarr20 · 技术社区 · 6 年前

html, body {
margin:0;
padding:0;
background:grey;
}

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

.image1, .image2, .image3, .image4, .image5, .image6 {
padding:10px;
}

img {
  max-width:100%;
}

<div class="container">
  <div class="image1">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image2">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image3">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
</div>

<div class="container">
  <div class="image4">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
</div>

<div class="container">
  <div class="image5">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image6">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
</div>

我目前正在做它与3个独立的柔性容器,我试图结合在1的一切。

我能用flexbox做这个吗?CSS网格更合适吗?

2 回复 | 直到 6 年前

Quentin 6 年前

我能用flexbox做这个吗

是的,使用 flex-wrap 包值,这将强制项换行到多行上。

html, body {
  margin: 0;
  background: grey;
}

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

.image {
  padding: 10px;
  box-sizing: border-box;
}

img {
  width: 100%;
}

.third {
  width: 33.333%;
}

.half {
  width: 50%;
}

.full {
  width: 100%;
}

<div class="container">
  <div class="image third">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image third">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image third">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image full">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image half">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image half">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
</div>

flex 而不是 width .

html, body {
  margin: 0;
  background: grey;
}

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

.image {
  flex: 1 0 0;
  padding: 10px;
  box-sizing: border-box;
}

.image.full {
  flex: none;
  width: 100%;
}

img {
  width: 100%;
}

<div class="container">
  <div class="image">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image full">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
</div>

Michael Benjamin William Falcon 6 年前

使用CSS网格,布局(使用单个容器)相对简单。

使用网格 line-based placement 定位网格项和创建网格区域的技术。

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
}

.image1, .image2, .image3 {
  grid-column: span 2;
}

.image4 {
  grid-column: 1 / -1;
  justify-self: center; /* optional */
}

.image5, .image6 {
  grid-column: span 3;
}

img {
  max-width: 100%;
}

body {
  margin: 0;
  padding: 10px;
  background: grey;
}

<div class="container">
  <div class="image1">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image2">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image3">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image4">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image5">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image6">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
</div>

如何在flexbox布局中组合容器?

jsFiddle demo