使用css

Question

是否可以使用flexbox制作类似于ul li的结构？ 我尝试将方块宽度设置为25％，将第1个，第3个或第5个宽度设置为50％宽度，并使用清除技巧：左侧和浮动组合：左侧和右侧。但不知何故，最后一个方块本身往往会掉落一行。

HTML：

<ul id="test">
  <li class="item">
  A
  </li>
  <li class="item">
  B
  </li>
  <li class="item">
  C
  </li>
  <li class="item">
  D
  </li>  
  <li class="item">
  E
  </li>
</ul>

CSS：

#test {
  list-style:none;
  width:100%;
}
.item {
  width:33%;
  float:left;
  background-color: #444
}

Fiddle here

Answer 1

Flexbox不适用于此用例。 在flex的帮助下，您只能显示一维结构，例如沿X轴或Y轴均匀分布元素。

在这种情况下，CSS-Grid是你的新朋友..

只要您不介意某些浏览器缺乏支持，这应该是直接的解决方案。

（此处为当前支持http://caniuse.com/#search=CSS%20Grid%20Layout）

#test {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-gap: 10px;
  
  list-style:none;
  padding: 0;
  margin: 0;
  
  height: 200px; /* just for demo */
}
.item {
  background-color: #D04E98
}

.item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

<ul id="test">
  <li class="item">
  A
  </li>
  <li class="item">
  B
  </li>
  <li class="item">
  C
  </li>
  <li class="item">
  D
  </li>  
  <li class="item">
  E
  </li>
</ul>

Answer 2

像这样的东西

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

* {
  box-sizing: border-box;
}

#test {
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

.item {
  width: 33.33%;
  float: left;
  padding:5px;
  height:100px;
  color:#fff;
}

.item:first-child {
  height: 200px;
}

.item>span {
  background-color: #444;
  display: block;
  height: 100%;
}

<ul id="test">
  <li class="item">
    <span>A</span>
  </li>
  <li class="item">
    <span>B</span>
  </li>
  <li class="item">
    <span>C</span>
  </li>
  <li class="item">
    <span>D</span>
  </li>
  <li class="item">
    <span>E</span>
  </li>
</ul>

Answer 3

你不需要弯曲。

#test {
  list-style:none;
  width:100%;
}
  .item1{
    width:50%;
    float:left;
    height:300px;
    background-color:red;
  }
.item {
  width:25%;
  float:left;
  background-color: #444;
  height:150px;
}

https://jsfiddle.net/rL7rqp1r/3/

Answer 4

我正在尝试使用flexbox解决这个2 * 2的盒子。请看链接。

   $scope.upload = function() {
                console.log($scope.data.img)

            }

Jsbin

Answer 5

可以使用Flexbox执行此操作，但您需要在flex-container元素或ul上设置固定高度。然后，您可以使用flex-direction: column和flex-wrap: wrap在达到最大高度时将项目分解为新列。

此外，如果您想使用边距，则需要使用calc()

将它们包含在高度中

#test {
  list-style: none;
  display: flex;
  flex-direction: column;
  height: 300px;
  flex-wrap: wrap;
  padding: 0;
}
.item {
  background: #CF509D;
  margin: 10px;
}
.item:first-child {
  flex: 0 0 calc(100% - 20px);
  margin-left: 0;
  width: 50%;
}
.item:not(:first-child) {
  flex: 0 0 calc(50% - 20px);
  width: calc(25% - 20px);
}

<ul id="test">
  <li class="item">A</li>
  <li class="item">B</li>
  <li class="item">C</li>
  <li class="item">D</li>
  <li class="item">E</li>
</ul>

以下是使用网格布局

执行此操作的方法

#test {
  display: grid;
  min-height: 300px;
  grid-template-columns: 50% 1fr 1fr;
  list-style: none;
  padding: 0;
}
.item {
  background: #D04E98;
  margin: 10px;
}
.item:first-child {
  grid-row: 1 / 3;
}

<ul id="test">
  <li class="item">A</li>
  <li class="item">B</li>
  <li class="item">C</li>
  <li class="item">D</li>
  <li class="item">E</li>
</ul>