主页 / 问题 / 1316730
Accepted
kiskiskit
Asked:2022-08-12 14:34:41 +0800 CST2022-08-12 14:34:41 +0800 CST

如何正确布局弹性块？

  • 772

请告诉我如何使用 flex 排列元素以获得此结果：

在此处输入图像描述

我的代码：

.img {
  width: 800px;
 height:  800px;
  background: grey;
  margin: 0 auto;
}
.img-block-1 {
  width: 100%;
  display: flex;
  padding: 20px;
  
}
.img-block-item-1 {
  width: 117px;
  height: 70px;
  background: red;
} 

.img-block-item-2 {
  background: red;
  width: 141px;
  height: 77px;
}

.img-block1-item {
  width: 98px;
  height: 98px;
  background: red;
  
}

.img-block2-2-item {
  width: 78px;
  height: 78px;
  background: red;
}

.img-block-2 {
  display: flex;
}


.img-block2-3-item {
  width: 156px;
  height: 88px;
}

.img-block3-1-item {
  width: 92px;
  height: 115px;
  background: red;
}
.img-block3-2-item {
  width: 177px;
  height: 33px;
  background: red;
}

.img-block3-3-item {
  width: 179px;
  height: 36px;
  background: red;
}

.img-block-3 {
  display: flex;
}
<div class="img">
  <div class="img-block-1">
    <div class="img-block-item-1">
      
    </div>
    <div class="img-block-item-2">
      
    </div>
  </div>
  <div class="img-block-2">
    <div class="img-block1-item">
      
    </div>
    <div class="img-block2-2-item">
      
    </div>
    <div class="img-block2-3-item">
      
    </div>
  </div>
  <div class="img-block-3">
    <div class="img-block3-1-item">
      
    </div>
    <div class="img-block3-2-item">
      
    </div>
    <div class="img-block3-3-item">
      
    </div>
  </div>
</div>

html

3 个回答

  1. Best Answer

    这是一个给你的例子。底线是您可以减少 div 的数量并且不制作包装块（第 7 和第 8 除外）：

    .img {
  max-width: 800px;
  background: grey;
  padding: 10px 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
[class^="img-item"] {
  background-color: red;
  height: 100px;
  margin: 10px 0;
}
.img-item-1,
.img-item-2 {
  width: 49%;
}
.img-item-3,
.img-item-4,
.img-item-5 {
  width: 32%;
}
.img-item-6 {
  width: 32%;
  height: 210px;
}
.img-block {
  width: 66%;
}
    <div class="img">
    <div class="img-item-1">
      1
    </div>
    <div class="img-item-2">
      2
    </div>
    <div class="img-item-3">
      3
    </div>
    <div class="img-item-4">
      4
    </div>
    <div class="img-item-5">
      5
    </div>
    <div class="img-item-6">
      6
    </div>
    <div class="img-block">
      <div class="img-item-7">
        7
      </div>
      <div class="img-item-8">
        8
      </div>
    </div>
</div>

    • 3

  2. 一切都建立在flex-container 的基本属性之上。您应该熟悉 CSS Flexbox 属性以供将来参考。另请阅读有关将类分配给 HTML 元素的文章。有不同的技术 - BEM、继承和其他。

    MDN 上的 CSS Flexbox Flexbox BEM
    完整指南

    .img {
width: 800px;
height: 800px;
position: absolute;
top:0;
left:0;
background: gray;
}

.img-block-1, .img-block-2, .img-block-3, .double {
  display: flex;
  justify-content: space-between;
}

.item {
  background: red;
}

.img-block-1, .img-block-2, .img-block-3 {
  width: 280px;
  height: 70px;
  margin: 50px;
}

.img-block-1 .item {
  width: 120px;
  height: 70px;
  background: red;
}

.img-block-2 .item {
  width: 80px;
  height: 70px;
  background: red;
}

.img-block-3 {
  height: 120px;
}

.img-block-3 .item:first-child {
  width: 80px;
  height: 100%;
}

.double {
  flex-direction: column;
  width: 150px;
}

.img-block-3 .double .item {
  width: 100%;
  height: 40px;
}
    <div class="img">
  <div class="img-block-1">
    <div class="item">
      
    </div>
    <div class="item">
      
    </div>
  </div>
  <div class="img-block-2">
    <div class="item">
      
    </div>
    <div class="item">
      
    </div>
    <div class="item">
      
    </div>
  </div>
  <div class="img-block-3">
    <div class="item">
      
    </div>
    <div class="double">
      <div class="item">

      </div>
      <div class="item">

      </div>
    
    </div>
   
  </div>
</div>

    • 2

  3. 一般来说，已经很可能使用网格：

    .img {
  display: grid;
  grid-template: 230px 230px 310px /  repeat(6, 1fr);
  grid-gap: 15px;
  height: 800px;
  max-width: 800px;
  background: grey;
  margin: 0 auto;
}
[class^="img-item"] {
  background-color: red;
}
.img-item-1 {
  grid-column: 1 / 4;
  grid-row: 1;
}
.img-item-2 {
  grid-column: 4 / 7;
  grid-row: 1;
}
.img-item-3 {
  grid-column: 1 / 3;
  grid-row: 2;
}
.img-item-4 {
  grid-column: 3 / 5;
  grid-row: 2;
}
.img-item-5 {
  grid-column: 5 / 7;
  grid-row: 2;
}
.img-item-6 {
  grid-column: 1 / 3;
  grid-row: 3;
}
.img-block {
  grid-column: 3 / 7;
  grid-row: 3;
  display: grid;
  grid-gap: 15px;
}
    <div class="img">
    <div class="img-item-1">
      1
    </div>
    <div class="img-item-2">
      2
    </div>
    <div class="img-item-3">
      3
    </div>
    <div class="img-item-4">
      4
    </div>
    <div class="img-item-5">
      5
    </div>
    <div class="img-item-6">
      6
    </div>
    <div class="img-block">
      <div class="img-item-7">
        7
      </div>
      <div class="img-item-8">
        8
      </div>
    </div>
</div>

    • 2

相关问题