Question

我想要2组3个输入。在更宽的屏幕上，两组应该并排，而在较窄的屏幕上，两组应该堆叠。组内的3个输入项应始终并排。

在所有情况下，输入项应在窗口宽度上均匀分布。换句话说，在较大的屏幕上，我应该看到6个输入大小相等，占据了窗口的宽度。在较小的屏幕上，我应该看到3个相同大小的输入占据了窗口的宽度，堆叠在3个相似的输入之上。

随着窗口的增大或缩小，输入应按比例改变大小。当窗口太小而6个输入并排放置时，它应该转到2组3，每组中的3个输入扩展，以便组占据窗口的宽度。 / p>

我想用flexbox专门做这个。我意识到媒体查询可以做到这一点，但我最终会将其嵌入到一个可扩展的div中，因此媒体查询将无效。

此代码示例接近，因为它执行包装，但它不会增加输入（或输入周围的div包装器）以占用窗口的宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex Test</title>
    <style>
        .row {
            flex-wrap: wrap;
            flex-grow: 1;
        }
        .group {
            display: inline-flex;
            flex-wrap: nowrap;
            flex: 1 0 100%;
        }
        .item {
            flex: 1;
        }
    </style>
</head>
<body>
<div id="wrapper" style="display:flex">
    <div class="row">
        <div class="group">
            <div class = "item">
                <input text="test">
            </div>
            <div class = "item">
                <input text="test2">
            </div>
            <div class = "item">
                <input text="test3">
            </div>
        </div>
        <div class="group">
            <div class = "item">
                <input text="test">
            </div>
            <div class = "item">
                <input text="test2">
            </div>
            <div class = "item">
                <input text="test3">
            </div>
        </div>
    </div>
</div>
</body>
</html>

Answer 1

我不确定在没有媒体查询的情况下是否可以实现所需的布局。由于您希望输入灵活并占据容器的整个宽度，因此需要一些方法来知道何时换行。媒体查询和固定宽度是很好的触发器。

在这个答案中，我将突出显示代码中的一些问题，这可能有助于您更好地掌握情况。

这是你原来的CSS，带有我的评论：

#wrapper {
    display: flex; /* valid */
}

.row {
    flex-wrap: wrap; /* INVALID #1 */
    flex-grow: 1; /* valid */
}

.group {
    display: inline-flex; /* valid */
    flex-wrap: nowrap; /* valid */
    flex: 1 0 100%; /* INVALID #2 */
}

.item {
    flex: 1; /* valid */
}

无效＃1：

此代码无效，因为flex-wrap属性仅适用于Flex容器。由于您尚未将display: flex或display: inline-flex应用于.row，因此该元素不是灵活容器，只会忽略flex-wrap。

无效＃2：

此代码无效，因为flex属性仅适用于弹性项目。由于父元素 - .row - 不是灵活容器，因此.group不是灵活项，flex属性将被忽略。

Answer 2

媒体查询可以轻松转换为flex。

诀窍是你需要改变一点方法

让我们假设您希望媒体查询断点为500px。高于此，我们将采用内联方法

这意味着内部元素的弹性基础是该值的一半，250px。当容器高于500px时，它将允许将2个元素设置在同一行中（这样2个适合）。

我在元素中添加了边框，以便于查看它是什么。

＆＃13;

div {
  margin: 3px;
}

#wrapper {
  width: 60%;
  border: 2px solid  red;
}


.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border: 2px solid blue;
  flex: 100% 1 1;
}

.group {
  border: 2px solid green;
  display: flex;
  flex: 250px 1 1;
}

.item {
  flex: auto 1 1;
  overflow: hidden;
}

.item input {
  width: 100%;
  max-width: 100%;
}

＆＃13;

<div id="wrapper">
    <div class="row">
        <div class="group">
            <div class = "item">
                <input text="test">
            </div>
            <div class = "item">
                <input text="test2">
            </div>
            <div class = "item">
                <input text="test3">
            </div>
        </div>
        <div class="group">
            <div class = "item">
                <input text="test">
            </div>
            <div class = "item">
                <input text="test2">
            </div>
            <div class = "item">
                <input text="test3">
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 3

感谢您的帮助。它帮助我找到了我想要的答案。我认为答案取决于使中间组既是flex容器又是flex项，如下所示：

 compile 'org.slf4j:slf4j-api:1.7.12'
    compile 'com.googlecode.json-simple:json-simple:1.1.1'
    compile 'de.grundid.opendatalab:geojson-jackson:1.0'
    compile 'org.springframework:spring-web:4.2.5.RELEASE'
    compile 'org.springframework:spring-webmvc:4.2.5.RELEASE'
    compile 'org.springframework:spring-jdbc:4.2.5.RELEASE'
    compile 'org.springframework:spring-core:4.2.5.RELEASE'
    compile 'org.springframework:spring-context:4.2.5.RELEASE'
    compile 'org.springframework:spring-aop:4.2.5.RELEASE'
    compile 'org.springframework.security:spring-security-web:4+'
    compile 'org.springframework.security:spring-security-config:4+'

嵌套的flexbox组

3 个答案: