Which css rules are ignored when flexbox is active?

Question

How can I configure flexbox to have a nice fallback? Say I have this:

.parent{
	display: flex;
	flex-flow: row wrap;
	width: 320px;
	border: 1px solid black;
}
.children{
	text-align: center;
	flex: 1;
	background: #DDD;
}

<div class="parent">
	<div class="children">1</div>
	<div class="children">2</div>
	<div class="children">3</div>
</div>

What rules am I allowed to add to have a nice fallback for older browsers and that they get completly ignored and don't disturb flexbox.

Notice I don't ask for a polifill or anything, I just want something that fallbacks to something similar. It would be nice to know exactly wich rules get ignored when flexbox is active. Obviously display is overwritten but, what about children's width? What about children's float? what about position: absolute? what about margins?

Answer 1

According to the spec,

Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout. In particular:

• the column-* properties in the Multi-column Layout module [CSS3COL] have no effect on a flex container.

• float and clear have no effect on a flex item, and do not take it out-of-flow. However, the float property can still affect box generation by influencing the display property’s computed value.

• vertical-align has no effect on a flex item.

• the ::first-line and ::first-letter pseudo-elements do not apply to flex containers, and flex containers do not contribute a first formatted line or first letter to their ancestors.

For your specific questions,

• Flex item width (assuming horizontal flow):

  The flex item’s main size property is either the width or height property, whichever is in the main dimension.

  This will be used as the flex basis if flex-basis is auto:

  When specified on a flex item, the auto keyword retrieves the value of the main size property as the used flex-basis.

  Otherwise, it will be ignored.

• Absolutely-Positioned Flex Children

  An absolutely-positioned child of a flex container does not participate in flex layout. However, it does participate in the reordering step (see order), which has an effect in their painting order.

• Flex Item Margins and Paddings

  The margins of adjacent flex items do not collapse. Auto margins absorb extra space in the corresponding dimension and can be used for alignment and to push adjacent flex items apart; see Aligning with auto margins.

  Percentage margins and paddings on flex items are always resolved against their respective dimensions; unlike blocks, they do not always resolve against the inline dimension of their containing block.

  Note: This behavior is currently disputed, and might change in a future version of this specification to match the behavior of blocks.