Question

我一直在努力安排这种图像布局。我一直在考虑使用flexbox，我很确定它可以使用它，但我无法找到正确的方法来实现它。如果有人能够帮助我，我会很高兴。这是布局，每个方块都是链接标记中的img：

每个img之间的空格必须相同，这就是为什么我一直在考虑使用flexbox。

提前致谢， Ĵ

编辑：我上传了我正在处理的内容： http://163.172.185.65/flexboxuse.html

Answer 1

你可以使用flexbox来解决这个问题，但即使只是float:left也可以做到这一点。

工作示例：

section {
width: 312px;
}

div {
float: left;
width: 100px;
height: 100px;
margin: 0 6px 6px 0;
background-color: gray;
}

div:nth-of-type(1) {
height: 206px;
}

div:nth-of-type(6) {
width: 312px;
margin-bottom: 0;
}

div:nth-of-type(3),
div:nth-of-type(5),
div:nth-of-type(6) {
margin-right: 0;
}

div:nth-of-type(1) {
background-color: lime;
}

div:nth-of-type(2) {
background-color: red;
}

div:nth-of-type(3) {
background-color: blue;
}

div:nth-of-type(4) {
background-color: yellow;
}

div:nth-of-type(5) {
background-color: cyan;
}

div:nth-of-type(6) {
background-color: magenta;
}

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

第二种方法 （此时元素高度相对于视口的高度）

section {
width: calc(100vh + 12px);
}

div {
float: left;
width: 33vh;
height: 33vh;
margin: 0 6px 6px 0;
background-color: gray;
}

div:nth-of-type(1) {
height: calc(66vh + 6px);
}

div:nth-of-type(6) {
width: calc(100vh + 12px);
margin-bottom: 0;
}

div:nth-of-type(3),
div:nth-of-type(5),
div:nth-of-type(6) {
margin-right: 0;
}

div:nth-of-type(1) {
background-color: lime;
}

div:nth-of-type(2) {
background-color: red;
}

div:nth-of-type(3) {
background-color: blue;
}

div:nth-of-type(4) {
background-color: yellow;
}

div:nth-of-type(5) {
background-color: cyan;
}

div:nth-of-type(6) {
background-color: magenta;
}

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

Answer 2

具有百分比的Flexbox示例：

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}
.sidebar {
  background: limegreen;
  height: 70%;
  width: 30%;
}
.rightCont {
  height: 70%;
  width: 70%;
  display: flex;
  flex-flow: row wrap;
}
.red {
  background: red;
  height: calc(50% - 10px);
  width: calc(50% - 10px);
  margin-left: 10px;
  margin-bottom: 10px;
}
.blue {
  background: blue;
  height: calc(50% - 10px);
  width: calc(50% - 10px);
  margin-left: 10px;
  margin-bottom: 10px;
}
.yellow {
  background: yellow;
  height: 50%;
  width: calc(50% - 10px);
  margin-left: 10px;
}
.sky {
  background: cyan;
  height: 50%;
  width: calc(50% - 10px);
  margin-left: 10px;
}
.bottom {
  background: violet;
  height: calc(30% - 10px);
  width: 100%;
  margin-top: 10px;
}

<div class="container">
  <div class="sidebar"></div>
  <div class="rightCont">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="yellow"></div>
    <div class="sky"></div>
  </div>
  <div class="bottom"></div>
</div>

Answer 3

以下是使用flex和百分比宽度的工作示例：

return View(Info);

html,body{
                border:0;
                margin:0;
                height:100%;
            }
            #wrap
            {
                width:300px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 100%;
            }
            #container
            {
                display:flex;
                flex-direction:row;
                flex-wrap:wrap;
                justify-content:space-between;
                height:70%;
            }
            #green
            {
                background-color:chartreuse;
                width:30%;
                order:0;
            }
            #red
            {
                background-color:red;
                height:48%;
            }
            #blue
            {
                background-color:blue;
                height:48%;            
            } 
            #yellow
            {
                background-color:yellow;
                height:49%;                
            }   
            #aquamarine
            {
                background-color:aqua;
                height:49%;
            }
            #purple
            {
                background-color:purple;
                height:28%;
            }
            .col
            {
                width:32%;
                display:flex;
                flex-direction:column;
                justify-content:space-between;
            }

CSS - 需要安排这个img布局

3 个答案: