#
Flex with Motivational Quotes
This example uses the Flex and FlexItem components to layout motivational quotes horizontally.
The second quote is set to grow, meaning it will take up more space compared to the others.
React / Next.js
Push yourself, because no one else is going to do it for you.
Success doesn’t just find you. You have to go out and get it.
Great things never come from comfort zones.
Flex
The Flex component is a wrapper around the native flexbox layout model. It provides props to control direction, wrapping, alignment, spacing (gap), and responsiveness for flexible container layouts.
| Prop | Description | Value(s) |
|---|---|---|
| `direction` | Controls the direction of flex items. | `'row' | 'column' | 'row-reverse' | 'column-reverse' | default: "row"` |
| `wrap` | Determines if and how flex items wrap to multiple lines. | `'wrap' | 'nowrap' | 'wrap-reverse' | default: "wrap"` |
| `justify` | Defines how items are aligned along the main axis. | `'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'` |
| `alignItems` | Aligns items along the cross axis (vertically by default). | `'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline'` |
| `alignContent` | Aligns rows when there is extra space in the cross axis. | `'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around'` |
| `gap` | Applies spacing between all items in both directions. | `number | default: undefined` |
| `gapX` | Applies horizontal spacing only. | `number | default: undefined` |
| `gapY` | Applies vertical spacing only. | `number | default: undefined` |
| `gapUnit` | The CSS unit to use for gap values. | `'rem' | 'px' | 'em' | default: "rem"` |
| `responsiveSmall` | Adds a responsive utility class for small screens. | `boolean` |
| `responsiveMedium` | Adds a responsive utility class for medium screens. | `boolean` |
| `responsiveLarge` | Adds a responsive utility class for large screens. | `boolean` |
| `width` | Sets the width of the container. | `string` |
| `height` | Sets the height of the container. | `string` |
| `style` | Applies inline styles directly to the flex container. | `React.CSSProperties` |
| `className` | Additional CSS class names to apply. | `string` |
| `funcss` | Alternative class name utility (if using funcss-style classes). | `string` |
| `id` | Sets a unique identifier for the container. | `string` |
| `children` | React children to be rendered inside the flex container. | `ReactNode` |
FlexItem
The FlexItem component is used inside a Flex container to control the layout behavior of individual flex items. It supports shorthand and fine-grained control like grow, shrink, basis, and self-alignment.
| Prop | Description | Value(s) |
|---|---|---|
| `flex` | Shorthand for flex-grow, flex-shrink, and flex-basis. | `string (e.g., "1 0 auto")` |
| `grow` | Specifies how much the item will grow relative to others. | `number | default: undefined` |
| `shrink` | Specifies how much the item will shrink relative to others. | `number | default: undefined` |
| `basis` | Initial main size of the item before extra space is distributed. | `string (e.g., "100px", "30%")` |
| `alignSelf` | Overrides the container's alignItems for this item. | `'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'` |
| `fullWidth` | Makes the item take 100% of the width. | `boolean` |
| `fullHeight` | Makes the item take 100% of the height. | `boolean` |
| `style` | Inline styles for the item. | `React.CSSProperties` |
| `className` | Additional class names for the item. | `string` |
| `funcss` | Functional class utility support (if using funcss system). | `string` |
| `id` | Element ID for the flex item. | `string` |
| `children` | The nested content inside the flex item. | `ReactNode` |