文章/答案/技术大牛

发布

社区首页 >问答首页 >防止Flex-wrap 3:1案例

问防止Flex-wrap 3:1案例
EN

Stack Overflow用户

提问于 2017-01-24 06:13:59

回答 2查看 743关注 0票数 1

对不起，我不知道怎么写正确的问题。但这是我想要解决的问题：

如果容器有4个项目，并且每个项目都有Flex:1 -->，那么它将通过以下顺序定位这些项目:1行，4个项目--> 2行，3个项目在第1行，1个大项目在第2行->2行，2个项目->和4行。

有没有办法防止'2行，3个项目在第1行，1个大项目在第2行‘的情况？(第二种情况)

同样的情况下，容器有6个项目，8个项目，...以此类推...

示例如下：

非常感谢。

css

flexbox

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-01-24 07:13:01

最简单、最优雅的解决方案可能是将两个项目分别包装在单独的flex容器中，而不使用flex-wrap: wrap;

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

/* no row-wrapping here */
/* just leave it with default flex-wrap: nowrap */
.flex-inner {
  display: flex;
}

/* Just styles for demo */
.flex-item {
  width: 200px;
  height: 100px;
  background-color: orange;
  color: white;
  font-size: 3rem;
}

<div class="flex-outer">
  <div class="flex-inner">
    <div class="flex-item">
      One
    </div>
    <div class="flex-item">
      Two
    </div>
  </div>
  <div class="flex-inner">
    <div class="flex-item">
      Three
    </div>
    <div class="flex-item">
      Four
    </div>
  </div>
</div>

如果希望项目占用所有剩余空间，请为.flex-item和.flex-inner设置flex: 1;。

票数 2

Stack Overflow用户

发布于 2017-01-24 07:05:10

我通过这种方式得到了你需要的.首先，我对包装图像的div应用了flex声明。

<div class="wrap">

    <p>picture</p>
    <p>picture</p>
    <p>picture</p>
    <p>picture</p>

</div>

.wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-flow: wrap;
    -webkit-flex-flow: wrap;
    flex-flow: wrap;
}

然后我使用了flex property，它是flex：(flex-grow) (flex-I) (flex-basis)的缩写。请注意，flex-basis设置为50%。这意味着该元素将占据视口的一半。

.wrap p {
    flex: 0 0 50%;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41816645

复制

相似问题

问防止Flex-wrap 3:1案例
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问防止Flex-wrap 3:1案例EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问防止Flex-wrap 3:1案例
EN