flex box specialize CSS for stacked item?

Question

For a wrap flex box, is it possible to modify the box behaviour once the box is stacked ? (In pure CSS).

Just taking this toy example,

p {
  border: dashed 1px;
}

#container {
  display: flex;
  flex-wrap: wrap;
}

#item1 {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: end;
  align-content: end;
  background: blue;
}

#item2 {
  flex: 3 1 auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: start;
  align-content: start;
  background: red;
}

<div id="container">
  <div id="item1">
    <p>This is the item 1.</p>
    <p>item 1.</p>
  </div>
  <div id="item2">
    <p>This is the item 2.</p>
    <p>item 2.</p>
  </div>
</div>

is it possible to center the p item, once the blue box is stacked (by resizing the window). I expected something like :

#item2: wrap {
  align-items: center;
  align-content: center;
}

Is it actually possible in pure CSS ?

@Turnip We can use any CSS property on our flex-items, the only case is with flex-basis and width, in which case flex-basis gets applied. — Imran Rafiq Rather, Apr 17 '20 at 15:54
@ImranRafiqRather You have completely misinterpreted the question. — Turnip, Apr 17 '20 at 16:00
@ Turnip : My Bad bro, I got it now. Let me try to see how to handle this. I accept my mistake and thanks for correcting me :) — Imran Rafiq Rather, Apr 17 '20 at 16:03
@ Turnip Just updated the answer, Thank you for stopping me for sharing the wrong information. God Bless :) — Imran Rafiq Rather, Apr 17 '20 at 16:21

Imran Rafiq Rather · Answer 1 · 2020-04-17T16:18:20.233

-2

No that is not possible as of now :). We should have an event telling when has the flex-wrapping of flex-items happened and then by using the event handler in javascript, we could have changed CSS in Javascript for the flex-items. But I have failed so far to find our such an event.

So, not possible.

edited Apr 17 '20 at 16:18

answered Apr 17 '20 at 15:32

Imran Rafiq Rather

7,677
1
16
35

2

How does this solve the problem stated in the question? _"center the p item, once the blue box is stacked (by resizing the window)"_ – Turnip Apr 17 '20 at 15:38
@turnip: So when the flex-items were stacked, he could of-course use text-align:center, to center his items – Imran Rafiq Rather Apr 17 '20 at 15:43
OP means when you shrink the window and the blocks wrap on to a new line. – Turnip Apr 17 '20 at 15:48
@Turnip Even when we resize the window ,and the flex-items stack it is possible, I have made many many of projects on flexbox... – Imran Rafiq Rather Apr 17 '20 at 15:52
@Imran you misunderstood the question sorry. The goal is to modify a flex item css property dynamically, only when the flex item goes stacked (from row to column). In the example, try to center the text only when the right box move under the left box (when reducing the window size) in pure CSS. – gdolle Apr 17 '20 at 15:56
@gdolle Ohhh, Really ...Sorry My Bad. Let me give it one more try :) – Imran Rafiq Rather Apr 17 '20 at 15:59
@gdolle In that case we have to see whether an event exists, which tells us, when the flex-wrapping has happened, and apply styles through javascript in the event handler. But if no such thing exists we cannot do this :) – Imran Rafiq Rather Apr 17 '20 at 16:14

flex box specialize CSS for stacked item?

1 Answers1