Flexbox-以2件为一组包装物品 [英] Flexbox - wrapping items in sets of 2

问题描述

向熟悉Flexbox的任何人快速提问.

Got a quick question for anyone familiar with Flexbox.

我有一排4个弹性商品.我正在努力使它在第一个断点( max-width:1024px )换成2列(共2列).我想我可以使用宽度上的％值来实现这一点在flex容器中的每个项目，但这似乎不起作用.

I have a row of 4 flex items. I'm looking to make it so at the first breakpoint (max-width:1024px) they wrap into 2 columns of 2. I thought I might be able to achieve this using a % value on the width of each item inside the flex container but that doesn't seem to work.

代码在这里:

http://codepen.io/reskk/pen/rrpdVm

我想我可以通过在2个< div> s内一次包装2个弹性项目来实现此目的.但是，这只会增加布局和使页面对称的工作量.

I'm thinking I could achieve this by wrapping the flex items 2 at a time within 2 <div>s. However this just creates a lot more work to do with layout and making the page symmetrical.

有没有一种方法可以仅使用宽度百分比或类似的方法来做到这一点?

Is there a way I can do this just using width percentages or something similar?

例如:
25％基线宽度-每行4个
50％宽度@ 1024px-每行2个
100％宽度@ 769px-每行1个

For example:
25% baseline width - 4 per row
50% width @ 1024px - 2 per row
100% width @ 769px - 1 per row

谢谢

Rik

推荐答案

要实现此目的，您需要包装flex容器并设置flex-grow&缩小至0％的儿童，以防止弹性内容在其内容不适合所需空间(即25％)时(明显)拉伸或收缩.然后，您可以正常地为每个断点设置flex-basis.

To achieve that, you need to wrap your flex container and set flex-grow & shrink to 0% to children in order to prevent your flex items from (obviously) stretching or shrinking when their content doesn't fit in the desired space (i.e. 25%). Then, you can set flex-basis normally for each breakpoint.

根据您的示例，您可以执行以下操作:

Based on your example, here's what you can do:

.whatflex {
  display: flex;
  flex-wrap: wrap;
}

.con {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

@media only screen and (min-width: 769px){
  .con{ flex-basis: 50%; }
}

@media only screen and (min-width: 1024px){
  .con{ flex-basis: 25%; }
}

我已经在此处更新了您的笔.

I've updated your pen here.

这篇关于Flexbox-以2件为一组包装物品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！