---
title: "Core — flex-parent"
canonical: https://sky-ui.cf.sky.com/core/system/flex-parent
---

# Core — flex-parent

Applying the `flex-parent` system modifier to your component will allow consumers of your component to pass in the following props:

| Property | Type | Description |
| --- | --- | --- |
| `$flexDirection` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) | Applies flex-direction styles to the element |
| `$flexWrap` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) | Applies flex-wrap styles to the element |
| `$alignItems` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | Applies align-items styles to the element |
| `$alignContent` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) | Applies align-content styles to the element |
| `$justifyContent` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | Applies justify-content styles to the element |
| `$gap` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) | Sets the gaps between rows and columns |
| `$columnGap` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) | Sets the gap between an element's columns |
| `$rowGap` | [See MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) | Sets the gap between an element's rows |