apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/Flex.StackItem.mdx
import { Meta } from '@storybook/addon-docs/blocks'; import { CodeComparison, CodeExample } from './utils.stories';
<Meta title="Concepts/Migration/from v8/Components/Flex/Stack item" /><div className={styles.root}>
<div className={styles.item}>Item</div>
</div>
```js
makeStyles({
root: {...}, // Flex container
item: {
height: 'auto',
width: 'auto',
flexShrink: 1,
},
})
```
```html
<div className="flex">
<div className="flex-item">Item</div>
</div>
```
```css
.flex-item {
height: auto;
width: auto;
flex-shrink: 1;
}
```
MDN documentation:
center is used below as an example value
```js
makeStyles({
root: {
alignSelf: 'center'
},
})
```
```css
.flex-item {
align-self: center;
}
```
MDN documentation:
This is just an override to apply the class name to the rendered node.
```js
makeStyles({
root: {
flexShrink: 0,
},
})
```
```css
.flex-item {
flex-shrink: 0;
}
```
MDN documentation:
```js
makeStyles({
root: {
flexGrow: 1,
},
})
```
```css
.flex-item {
flex-grow: 1;
}
```
MDN documentation:
1 is used below as an example value
```js
makeStyles({
root: {
order: 1,
},
})
```
```css
.flex-item {
order: 1;
}
```
MDN documentation:
1 is used below as an example value
```js
makeStyles({
root: {
flexShrink: 1,
},
})
```
```css
.flex-item {
flex-shrink: 1;
}
```
MDN documentation:
```js
makeStyles({
root: {
height: "100%",
},
})
```
```css
.flex-item {
height: 100%;
}
```
MDN documentation: