换行时，是否可以将CSS应用于弹性项目?

问题描述

.wrapper {
  border: 5px solid pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.a-fc {
  background-color: purple;
  width: 300px;
  /*height: 100px;*/
}

.b-fc {
    background-color: orange;
    display: flex;
    flex-direction: column;
    /*flex-wrap: wrap;*/
    flex-basis:70px;
    flex-grow:1;
}

.b-fc > * {
  flex-grow: 1;
  flex-basis: 100px;
}

.b-fc > *:nth-child(1) {
  background-color: red;
}

.b-fc > *:nth-child(2) {
  background-color: blue;
}

.b-fc > *:nth-child(3) {
  background-color: green;
}

<div class="wrapper">
  <div class="a-fc">
   <div>a1</div>
  </div>
  <div class="b-fc">
  <div>b1</div><div>b2</div><div>b3</div>
  </div>
</div>

FC =弹性容器.FI =弹性项目.

FC = flex-container.FI = flex-item.

当 .b-fc 保留在原始行上的空间低于70px时，我可以将其放置到新行上.

I am able to place .b-fc onto a new row when the space left for it to exist on the original row goes below 70px.

我的任务:我希望 b-fc 的FI在没有创建新行或不换行时垂直堆叠.我希望 b-fc 的FI可以在 b-fc 换行时水平对齐.

My task: I want b-fc's FIs to stack vertically when no new row is created/they don't wrap. I want b-fc's FIs to align horizontally when b-fc wraps.

当前解决方案

因此，我想在 .b-fc 换行时能够应用CSS会更强大.这可能吗?

Therefore, I'm figuring it'd be more powerful to be able to apply CSS when .b-fc wraps. Is this possible?

也许使用CSS变量/SASS，我可以不断评估FC- .a-fc < =小于70px.如果为true，则将样式应用于 .b-fc .

Perhaps using CSS variables/SASS I could continually assess whether FC - .a-fc <= than 70px. If true, apply stylings to .b-fc.

想法2:媒体查询

另一种选择是测试何时创建row2，使用媒体查询来捕获它，并通过媒体查询将CSS应用于 .b-fc .

Another option is to test when row2 is made, use media queries to capture this and apply CSS to .b-fc with media queries.

P.S.已问类似的问题.

P.S. Similar question has been asked here before in 2015. Maybe new techniques have transpired since.

推荐答案

对于这种特殊情况，您可以考虑将 max()与 flex-basis 结合使用.诀窍是要么具有 0px (水平项)，要么具有非常大的值(垂直项).

For this particular case you can consider the use of max() combined with flex-basis. The trick is to either have 0px (horizontal item) or a very big value (vertical items).

您会注意到，这不是通用解决方案，其值基于您的html结构:

You will note that this is not a generic solution and the value is based on your html structure:

395px = 300px (width of a-fx) + 70px (flex-basis of b-fc) + 10px (border of wrapper) + 16px (default body margin) - 1px

.wrapper {
  border: 5px solid pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.a-fc {
  background-color: purple;
  width: 300px;
}

.b-fc {
  background-color: orange;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 70px;
  flex-grow: 1;
}

.b-fc>* {
  flex-grow: 1;
  flex-basis: max(0px, (100vw - 395px)*100);
  height: 100px;
}

.b-fc>*:nth-child(1) {
  background-color: red;
}

.b-fc>*:nth-child(2) {
  background-color: blue;
}

.b-fc>*:nth-child(3) {
  background-color: green;
}

<div class="wrapper">
  <div class="a-fc">
    <div>a1</div>
  </div>
  <div class="b-fc">
    <div>b1</div>
    <div>b2</div>
    <div>b3</div>
  </div>
</div>

所以要回答您的问题:不，我们不能将CSS应用于包装(CSS无法检测到包装)，但是我们总能找到每种情况的解决方法.

So to answer your question: No, we cannot apply CSS on wrapping (CSS cannot detect wrapping) but we can always find workaround of each case.

类似的问题:

在没有媒体查询的情况下，如何实现3列台式机到1列移动版式

没有媒体查询的CSS网格最大列数

这篇关于换行时，是否可以将CSS应用于弹性项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！