使用弹性订单属性重新排列桌面和移动视图的项目

Question

我在容器内有3个div.没有嵌套的div.

我正在使用flex和orderproperty.

在移动设备上,可以使用order房产.

但是在较大的屏幕上它失败了.

我没有为div 2和3使用容器div,以便在移动设备上将它们命令为2,1,3.

HTML文件

<div class="container">
<div class="orange">1</div>
<div class="blue">2</div>
<div class="green">3</div>
</div>

CSS文件

/*************** MOBILE *************/
.container
{
    display: flex;
    flex-wrap: wrap;

}
div.blue
{
    order:1;
    width: 100%;
}
div.orange
{
    order:2;
    width: 100%;
}
div.green
{
    order:3;
    width: 100%;

}
/***************************/
@media screen and (min-width:1200px)
{
.container
{
    justify-content: space-between;
}
div.blue
{
    order:2;
    width: 36%;
}
div.orange
{
    order:1;
    width: 60%;
}
div.green
{
    order:3;
    width: 36%;
}
}

Answer 1

在您的布局中,使用row wrap桌面视图将很难(如果不是不可能)使用CSS实现.事情至少会变得过于复杂.为什么？

因为flexbox不是网格系统.它是一个布局系统,旨在通过容器中的空间分布来对齐内容.

在flexbox中,row wrap容器中的项必须换行到新行.这意味着div3无法包装在div2下面.它必须包裹在div1下面.

以下是项目如何在Flex容器中包装row wrap:

如果div3要在div2下包装,那将不是一行,那将是一个网格,而flex项目被限制在一个直的,不弯曲的行中.

换句话说,您不能在同一行中的另一个项目下进行弹性项目换行.

因此,在每列中保留由行中不是最高的项创建的空白区域,从而产生难看的间隙.

为了使你想要的布局工作row wrap,flex项目必须退出他们的行,以缩小差距 - 可能与绝对定位 - Flexbox无法做到.

对齐项目的一种方法是将div2和div3包装在自己的容器中.这个新容器将成为div1的兄弟.然后它可以成为嵌套的Flex容器flex-direction: column.现在差距已经消失,布局看起来正确.

除此之外,在这种特殊情况下,您需要使用该order属性(意味着所有项目必须具有相同的父项),因此嵌套的Flex容器是不可能的.

可能有用的column wrap不是row wrap:

/*************** MOBILE *************/

.container {
  display: flex;
  flex-direction: column;
  height: 200px; /* necessary so items know where to wrap */
}
div.orange {
  background-color: orange;
}
div.blue {
  order: -1;
  background-color: aqua;
}
div.green {
  background-color: lightgreen;
}
.container > div {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
/***************************/

@media screen and (min-width: 800px) {
  .container {
    flex-wrap: wrap;
  }
  div.orange {
    flex-basis: 100%;
    width: 50%;
  }
  div.blue {
    flex-basis: 50%;
    width: 50%;
    order: 0;
  }
  div.green {
    flex-basis: 50%;
    width: 50%;
  }
}

<div class="container">
  <div class="orange">1</div>
  <div class="blue">2</div>
  <div class="green">3</div>
</div>

的jsfiddle

以下是另外两个选项:

• Desandro Masonry

  Masonry是一个JavaScript网格布局库.它的工作原理是根据可用的垂直空间将元素放置在最佳位置,有点像石膏在墙上贴合石头.

  ^{来源:http://masonry.desandro.com/}

• CSS网格布局模块1级

  此CSS模块定义了一个基于网格的二维布局系统,针对用户界面设计进行了优化.在网格布局模型中,网格容器的子节点可以定位在预定义的灵活或固定大小的布局网格中的任意插槽中.

  ^{来源:https://drafts.c​​sswg.org/css-grid/}

相关文章:柔性物品是否可以与其上方的物品紧密对齐？