在一个容器内使用两个 flex 方向

Question

如何在 一个容器 中创建以下布局。是否可以？

我知道我可以使用 display: flex; justify-content: center, align-items:center 使它们全部居中，但我可以选择将 2 个 div 变成列而不是行吗？

我基本上想要这个：

我正在试验这段代码。

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  border: 1px solid white;
  height: 600px;
  widows: 700px;
}

.container div {
  float: right;
}

.container div:nth-child(3) {
  flex-flow: column;
}

<section class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
</section>

Answer 1

使用 Flexbox 和多个容器的解决方案

<section class="container">
      <div>Item 1</div>
      <div>Item 2</div>
      <div class="flex-col-container">
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
      </div>
      <div>Item 6</div>
      <div>Item 7</div>
</section>
.container{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    border: 1px solid white;
    height: 600px;
    widows: 700px;
}

.flex-col-container {
    display: flex;
    flex-flow: column wrap;    
}

.container div {
  border: 1px solid black;
}

https://jsfiddle.net/karthick6891/j5ur9tw4/

Answer 2

弹性框

您可以使用 flexbox 和 order 属性.

实现您的布局

所有弹性项目的 order 默认值为 0。这意味着它们的顺序由它们在源代码中出现的顺序决定。

通过更改第 3 项和第 5 项的 order 和 flex-basis 值，可以使它们分别出现在第一行和最后一行。

.container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

div {
  flex: 1;
}

div:nth-child(3) {
  order: -1;
  flex-basis: 100%;
}

div:nth-child(5) {
  order: 1;
  flex-basis: 100%;
}

<section class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
</section>

或者，您可以使用不可见的弹性项目来平衡空白 space。您需要使用 visibility: hidden 添加 8 个项目。

.container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

div {
  flex-basis: 20%;
}

.hidden {
  visibility: hidden;
}

<section class="container">
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div>Item 3</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div>Item 1</div>  
  <div>Item 2</div>
  <div>Item 4</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>
  <div>Item 5</div>  
  <div class="hidden">hidden</div>
  <div class="hidden">hidden</div>

</section>

网格

这是最灵活、最可靠的选项。

使用CSS网格，布局相对简单，易于构建，并且可以使用多种方法。

在我下面的示例中，我使用了 grid-template-areas 属性的 ASCII 艺术方法。

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 50px);
  grid-gap: 10px;
  grid-template-areas: " . . . . ." 
                       "  . . three . ."
                       " one two four six seven"
                       " . . five . ."
                       " . . . . ."
}

div:nth-child(1) { grid-area: one; }
div:nth-child(2) { grid-area: two; }
div:nth-child(3) { grid-area: three; }
div:nth-child(4) { grid-area: four; }
div:nth-child(5) { grid-area: five; }
div:nth-child(6) { grid-area: six; }
div:nth-child(7) { grid-area: seven; }

/* non-essential decorative styles */
.container {
  width: 75%;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid black;
  background-color: lightyellow;
}
div {
  background-color: lightgreen;
  border: 1px dashed gray;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

<section class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
</section>

有关这些网格属性如何工作以及浏览器支持数据的完整说明，请参阅以下帖子：

CSS-only masonry layout but with elements ordered horizontally

在一个容器内使用两个 flex 方向

Use two flex directions inside one container

html

css

flexbox

css-grid

弹性框

网格