如何在flexbox布局的最后一行中获得单独的元素以使其看起来相同？

Question

我试图为一个矩形列表创建一些CSS，并使用包装，这是响应式的。矩形可以包含可变数量的文本。矩形的最小宽度应为300px，但如果有更多可用空间，则可以增长。无论矩形的数量如何，都应该有效。

这是我希望它在大型桌面屏幕，普通桌面屏幕和手机中看起来像的图像，大致：

（我意识到大多数手机和台式机都比像素更宽，但这些数字在SO代码片段中更易于使用。）

我尝试了三种技术，但没有一种技术可以实现我的目标：

1。 Flexbox不起作用：

Flexbox似乎是这项工作的理想选择。 Flexbox实现的问题在于我无法找到确保最后一个矩形与其余矩形保持相同大小的方法，同时还允许矩形在非常宽的屏幕中生长。这是我能想出的最好的flexbox结果的图像，最后一行存在问题：

这里是flexbox实现的代码：

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
}
.rect {
  flex: 1 0 300px;
  height: 150px;
}

＆＃13;

<div class="container">
  <div class="rect" style="background-color: #2F80ED"></div>
  <div class="rect" style="background-color: #2D9CDB"></div>
  <div class="rect" style="background-color: #56CCF2"></div>
  <div class="rect" style="background-color: #A6E2F5"></div>
  <div class="rect" style="background-color: #D6EBF2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

2。 float: left技术不起作用：

另一种响应技术是使用浮点数，但我找不到一种方法来保持矩形的宽度相同（具有不同的文本内容），同时还允许它们在最宽的屏幕中生长。这是我最终得到的图像：

以下是float: left实施的代码：

＆＃13;

＆＃13;

.container:after {
  content: "";
  clear: both;
}
.rect {
  float: left;
  min-width: 300px;
  height: 150px;
  overflow-y: hidden;
}

＆＃13;

<div class="container">
  <div class="rect" style="background-color: #2F80ED">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</div>
  <div class="rect" style="background-color: #2D9CDB"></div>
  <div class="rect" style="background-color: #56CCF2">Lorem ipsum dolor sit amet, consectetur</div>
  <div class="rect" style="background-color: #A6E2F5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</div>
  <div class="rect" style="background-color: #D6EBF2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

3。为什么不进行媒体查询？

我正在寻找一种不涉及媒体查询的解决方案，因为媒体查询只允许您在屏幕宽度上设置条件，而不是.container宽度。

Answer 1

你可以通过一个没有高度的伪继续使用flex和一个额外的元素：

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
  background:gray;/*see me */
}
.container:after {
  content:'';
  flex: 1 0 300px;
  margin-bottom:auto;
  }
.rect {
  flex: 1 0 300px;
  height: 150px;
}

＆＃13;

<div class="container">
  <div class="rect" style="background-color: #2F80ED"></div>
  <div class="rect" style="background-color: #2D9CDB"></div>
  <div class="rect" style="background-color: #56CCF2"></div>
  <div class="rect" style="background-color: #A6E2F5"></div>
  <div class="rect" style="background-color: #D6EBF2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

：请注意，五个是好的，因为六个盒子的行为是不同的。

Answer 2

我知道你说你正在寻找一个没有涉及媒体查询的答案，但我相信这将是处理这种情况的最佳方法。

如果您在position: relative; .container上设置了.container，则所有孩子的宽度百分比将基于.rect的宽度。虽然从技术上讲，你仍然可以将你的条件设置在屏幕宽度之外，你仍然可以将容器宽度设置为你想要的任何尺寸，.rect将缩放到那个宽度，这将取决于哪个您的媒体查询的有效率是max-width:缩放到的百分比。

如果您不想让它超过一定规模，您还可以在任何媒体查询中为.container设置.container { position: relative; display: flex; flex-flow: row wrap; max-width: 1200px; } .rect { height: 150px; } @media (max-width: 1920px) { .rect { width: 20%; } } @media (max-width: 1000px) { .rect { width: 50%; } } @media (max-width: 600px) { .rect { width: 100%; } } 。

这是一个笔的链接，其布局看起来像上面的图像。 http://codepen.io/bryanrunner/pen/BppzbE

 func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

        FIRApp.configure()
        FBSDKApplicationDelegate.sharedInstance().application(application, didFinishLaunchingWithOptions: launchOptions)
          return true
    }


    @available(iOS 9.0, *)
    func application(_ application: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any])
        -> Bool {
            var shouldOpen :Bool = FBSDKApplicationDelegate.sharedInstance().application(application,  open: url, sourceApplication:options[UIApplicationOpenURLOptionsKey.sourceApplication] as! String!,annotation: options[UIApplicationOpenURLOptionsKey.annotation])
            return shouldOpen
    }

    // for iOS below 9.0
    func application(_ application: UIApplication, open url: URL, sourceApplication: String?, annotation: Any) -> Bool {
        var shouldOpen :Bool = FBSDKApplicationDelegate.sharedInstance().application(application,open: url as URL!,sourceApplication: sourceApplication,annotation: annotation)
        return shouldOpen
    }