HTML - Flex responsive layout modifiers

Switching between flex-direction column and row at breakpoints ( `-on-lg`).

Flex item

Switching between flex-direction column and row at breakpoints ( `-on-lg`). If content is likely to wrap, modifiers will need to be used to control width. The example below wraps because the flex item expands in response to long paragraph text.

Flex item

Because this text is long enough to wrap, this item's width will force the adjacent item to wrap.Lorem ipsum dolor sit amet consectetur adipisicing elit. Est animi modi temporibus, alias qui obcaecati ullam dolor nam, nulla magni iste rem praesentium numquam provident amet ut nesciunt harum accusamus.

Flex item

Switching between flex-direction column and row at breakpoints ( `-on-lg`). To control the width of the flex item, set `.pf-m-flex-1`on the flex group containing the long paragraph text.

Flex item

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est animi modi temporibus, alias qui obcaecati ullam dolor nam, nulla magni iste rem praesentium numquam provident amet ut nesciunt harum accusamus.

Flex item

Switching between flex-direction column and row at breakpoints ( -on-lg).

Switching between flex-direction column and row at breakpoints ( -on-lg). If content is likely to wrap, modifiers will need to be used to control width. The example below wraps because the flex item expands in response to long paragraph text.

Switching between flex-direction column and row at breakpoints ( -on-lg). To control the width of the flex item, set .pf-m-flex-1on the flex group containing the long paragraph text.

Switching between flex-direction column and row at breakpoints ( `-on-lg`).

Switching between flex-direction column and row at breakpoints ( `-on-lg`). If content is likely to wrap, modifiers will need to be used to control width. The example below wraps because the flex item expands in response to long paragraph text.

Switching between flex-direction column and row at breakpoints ( `-on-lg`). To control the width of the flex item, set `.pf-m-flex-1`on the flex group containing the long paragraph text.