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的

您可以使用flexbox和order属性来实现布局。

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

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

或者，您可以使用隐形弹性项来平衡空白区域。您需要使用visibility: hidden添加8个项目。

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

div {
  flex-basis: 20%;
}

.hidden {
  visibility: hidden;
}

＆＃13;

<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>

＆＃13;

网格

这是最灵活，最强大的选择。

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

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

在一个容器内使用两个弯曲方向

2 个答案:

Flexbox的

网格