apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/Flex.Stack.mdx
import { Meta } from '@storybook/addon-docs/blocks'; import { CodeComparison, CodeExample } from './utils.stories';
<Meta title="Concepts/Migration/from v8/Components/Flex/Stack" />Stack's approach to layout is slightly different from Northstar's Flex, and CSS Flexbox, and a column layout is the default arrangement. For a clean usage scenario of Stack, these are the required CSS properties to achieve the same result:
<CodeComparison> <CodeExample title="Render">```jsx
<div className={styles.root}>{children}</div>
```
```js
makeStyles({
root: {
display: 'flex',
flexDirection: 'column',
flexWrap: 'nowrap',
width: 'auto',
height: 'auto',
boxSizing: 'border-box',
'> *': {
textOverflow: 'ellipsis',
},
'> :not(:first-child)': {
marginTop: '0px',
},
'> *:not(.ms-StackItem)': {
flexShrink: 1,
},
},
})
```
```html
<div className="flex">
...
</div>
```
```css
.flex {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
width: auto;
height: auto;
box-sizing: border-box;
}
.flex > * {
text-overflow: ellipsis;
}
.flex > :not(:first-child) {
margin-top: 0px;
}
.flex > *:not(.ms-StackItem) {
flex-shrink: 1;
}
```
MDN documentation:
The as property strictly replaces which element type will be rendered as the root node. The default value for this is div.
```js
makeStyles({
root: {
'> *': {
flexShrink: 0,
}
},
})
```
```css
.flex > * {
flex-shrink: 0;
}
```
MDN documentation:
10px is used below as an example value
```js
makeStyles({
root: {
'> *': {
margin: '10px',
}
},
})
```
```css
.flex > * {
margin: 10px;
}
```
If you want to replicate the exact behavior of the prop, you'll have to keep in mind the following:
To keep the margin only between the items, you can prevent it from being applied to the last (or first) element. Heres an example with an horizontal layout and margin-right:
10px is used below as an example value
```js
makeStyles({
root: {
display: 'flex',
flexDirection: 'row',
'> :not(:last-child)': {
marginRight: '10px',
}
},
})
```
```css
.flex {
display: flex;
flex-direction: row;
}
.flex > :not(:last-child) {
margin-right: 10px;
}
```
As an alternative to this implementation, you can also use the CSS gap property. However, keep in mind that this is not the implementation in Stack, given that CSS gap is not supported by Internet Explorer 11, and might produce different results.
If you do not have this limitation, you can use the following CSS:
10px is used below as an example value
```js
makeStyles({
root: {
display: 'flex',
flexDirection: 'row',
gap: '10px',
},
})
```
```css
.flex {
display: flex;
flex-direction: row;
gap: 10px;
}
```
MDN documentation:
```js
makeStyles({
root: {
'> *': {
flexGrow: 1,
}
},
})
```
```css
.flex > * {
flex-grow: 1;
}
```
MDN documentation:
```js
makeStyles({
root: {
flexDirection: 'row',
},
})
```
```css
.flex {
flex-direction: row;
}
```
MDN documentation:
horizontalAlign/verticalAlign change which props they affect depending on your flex-direction.
Here is a table you can follow for which prop to use for alignment:
| Direction | `flex-direction` | Horizontal alignment | Vertical alignment |
|---|---|---|---|
| default | column | align-items | justify-content |
| horizontal | row | justify-content | align-items |
You can also refer to this MDN page for a great in depth explanation about how alignment works in flex container.
MDN documentation:
10px is used below as an example value
```js
makeStyles({
root: {
'> *': {
maxHeight: '10px',
}
},
})
```
```css
.flex > * {
max-height: 10px;
}
```
MDN documentation:
10px is used below as an example value
```js
makeStyles({
root: {
'> *': {
maxWidth: '10px',
}
},
})
```
```css
.flex > * {
max-width: 10px;
}
```
MDN documentation:
10px is used below as an example value
```js
makeStyles({
root: {
padding: '10px',
},
})
```
```css
.flex {
padding: 10px;
}
```
MDN documentation:
reversed will append "reverse" to your flex-direction CSS prop. Below is a table to reflect what you should use:
| Alignment | CSS | With `reversed` prop |
|---|---|---|
| default | column | column-reverse |
| horizontal | row | row-reverse |
Example usage for an horizontal layout:
<CodeComparison> <CodeExample>```js
makeStyles({
root: {
flexDirection: 'row-reverse',
},
})
```
```css
.flex {
flex-direction: row-reverse;
}
```
MDN documentation:
```js
makeStyles({
root: {
height: '100%',
},
})
```
```css
.flex {
height: 100%;
}
```
MDN documentation:
The wrap prop will also change the rendering. As such find below the styles and rendering being applied:
```jsx
<div className={styles.root}>
<div className={styles.inner}>
{children}
</div>
</div>
```
```js
makeStyles({
root: {
flexWrap: 'wrap',
overflow: 'visible',
height: '100%',
},
inner: {
display: 'flex',
flexWrap: 'wrap',
overflow: 'visible',
boxSizing: 'border-box',
width: '100%',
maxWidth: '100vw',
}
})
```
```html
<div className="flex">
<div className="inner">
...
</div>
</div>
```
```css
.flex {
flex-wrap: wrap;
overflow: visible;
height: 100%;
}
.inner {
display: flex;
flex-wrap: wrap;
overflow: visible;
box-sizing: border-box;
width: 100%;
max-width: 100vw;
}
```
MDN documentation: