CODEWITHSUNDEEP
htmlcssflexbox
david
david

Reputation: 5

CSS flexbox with element inside wrapper

I have a problem with the ordering element. I have container (flexbox) vith one child (order=1) and sibling div (wrapper i would'nt use flexbox) with child ordered but not work.

Can see full example : http://codepen.io/isyara/pen/HtniA (check wrapper im-changed-order)

thanks

Upvotes: 0

Views: 573

Answers (1)

cimmanon
cimmanon

Reputation: 68329

If what you want is to have the first example look like the second example, then you're out of luck. Flex items can only be arranged within their flex container.

+---------------+
|  +---------+  |
|  |    a    |  |
|  + --------+  |
|  +---------+  |
|  |    b    |  |
|  | +-----+ |  |
|  | |  c  | |  |
|  | +-----+ |  |
|  | +-----+ |  |
|  | |  d  | |  |
|  | +-----+ |  |
|  +---------+  |
+---------------+

If the outer container and b are both flex containers (display: flex applied to them), then only these arrangements are possible:

  • (c d) a
  • (d c) a
  • a (c d)
  • a (d c)

If b is not a flex container, then c and d are not flex items and cannot be arranged at all using the order property.

Elements a, c, and d must be sibblings to fully rearrange them:

+---------------+
|  +---------+  |
|  |    a    |  |
|  + --------+  |
|  +---------+  |
|  |    c    |  |
|  + --------+  |
|  +---------+  |
|  |    d    |  |
|  + --------+  |
+---------------+

Now you can have all of the arrangements from the previous example, plus these:

  • c a d
  • d a c

Upvotes: 1

Related Questions