Question

我有一个响应式设计，宽屏幕中的项目应该像这样包装：

+------+------+------+
|      |      |      |
|  A   |  B   |  C   |
|      |      |      |
+--------------------+
|      |      |
|  D   |  E   |
|      |      |
+------+------+

在狭窄的屏幕上应该像这样垂直堆叠：

+------+
|      |
|  A   |
|      |
+------+
|      |
|  B   |
|      |
+------+
|      |
|  C   |
|      |
+------+
|      |
|  D   |
|      |
+------+
|      |
|  E   |
|      |
+------+

现在我分别为这些解决方案做这样的事情：

flex-wrap: wrap;
----
flex-direction: column;

但是，通过简单地切换值来实现上述目标是否有一个单一的去除？

Answer 1

使用简写flex-flow: <flex-direction> || <flex-wrap>

来源：https://www.w3.org/TR/css-flexbox-1/#flex-flow-property

默认值为row nowrap，如果只设置其中一个，则另一个将是默认值，例如：

flex-flow: column - 列方向，无包装
flex-flow: wrap - 行方向，换行

Fiddle demo

Stack snippet

#container {
    display: flex;
    flex-flow: wrap;
}

#container > div {
    flex: 1;
    padding: 15px;
    text-align: center;
    background: lightblue;
}

@media (orientation: portrait) {
  #container {
    flex-flow: column;
  } 
}

#container > div:last-child { background: lightgreen; }

<div id="container">
    <div>
        <p>DIV 1</p>
    </div>
    <div>
        <p>DIV 2</p>
    </div>
</div>

使用flexbox切换包裹和柱流

1 个答案: