Question

我正在尝试实现两列flex，其中左列有许多div，右列有一个高div。我希望右列位于弹性框的顶部，与左列的第一个div内联。

但无论我尝试什么，右栏div都与左栏的div的最后一行对齐。

有点难以解释，但这个jsfiddle显示了我的意思。

我希望蓝色div位于所有红色div旁边的顶部。

似乎应该很容易，但唉......

Answer 1

CSS Flexbox无法清除兄弟，因为可以使用浮动，所以如果要使用弹性行方向，则需要包裹红色的，...

* {
  -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;  /* Firefox, other Gecko */
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px solid black;
}

.wrapper {
  flex-basis: 60%;
}

.sixty {
  height: 100px;
  background-color: red;
  border: 1px solid white;
}

.forty {
  flex-basis: 40%;
  background-color: blue;
  height: 1000px;
}

<div class="flex-container">
  <div class="wrapper">
    <div class="sixty"></div>
    <div class="sixty"></div>
    <div class="sixty"></div>
    <div class="sixty"></div>
    <div class="sixty"></div>
    <div class="sixty"></div>
    <div class="sixty"></div>
  </div>
  <div class="forty"></div>
</div>

..或将弯曲方向改为柱子，并给容器一个高度，一个不大于红色和蓝色高度之和的高度。

* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 1px solid black;
  height: 1000px;
}

.sixty {
  height: 100px;
  background-color: red;
  border: 1px solid white;
}

.forty {
  flex-basis: 1000px;
  background-color: blue;
}

<div class="flex-container">
  <div class="sixty"></div>
  <div class="sixty"></div>
  <div class="sixty"></div>
  <div class="sixty"></div>
  <div class="sixty"></div>
  <div class="sixty"></div>
  <div class="sixty"></div>
  <div class="forty"></div>
</div>

Answer 2

检查此解决方案是否适合您

Plunkr链接 - https://plnkr.co/edit/T17RW2LHJvw8FaxmwHyg?p=preview

css：

* {
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;
        }

        .flex-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        border: 1px solid black;
        }

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

        .flex-div{
            width: 50%;
        }

        .sixty {
        height: 100px;
        width : 100%;
        background-color: red;
        border: 1px solid white;
        }

        .forty {
        width : 100%;
        background-color: blue;
        height: 1000px;
        }

html：

<html>
<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>
    <div class="flex-cont">
        <div class="flex-div">
        <div class="sixty"></div>
        <div class="sixty"></div>
        <div class="sixty"></div>
        <div class="sixty"></div>
        <div class="sixty"></div>
        <div class="sixty"></div>
        <div class="sixty"></div>
    </div>
    <div class="flex-div">
        <div class="forty"></div>
    </div>
    </div>
 </body>
 </html>

如何获取弹性项目以清除其所有兄弟姐妹？

2 个答案: