import { Meta } from '@storybook/addon-docs/blocks';
import { CodeComparison, CodeExample } from './utils';
# @fluentui/react - Stack.Item
## Default state
```jsx
```
```js
makeStyles({
root: {...}, // Flex container
item: {
height: 'auto',
width: 'auto',
flexShrink: 1,
},
})
```
```html
```
```css
.flex-item {
height: auto;
width: auto;
flex-shrink: 1;
}
```
MDN documentation:
- [height](https://developer.mozilla.org/en-US/docs/Web/CSS/height)
- [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width)
- [flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)
---
---
## align
_`center` is used below as an example value_
```js
makeStyles({
root: {
alignSelf: 'center'
},
})
```
```css
.flex-item {
align-self: center;
}
```
MDN documentation:
- [align-self](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)
---
## className
This is just an override to apply the class name to the rendered node.
---
## disableShrink
```js
makeStyles({
root: {
flexShrink: 0,
},
})
```
```css
.flex-item {
flex-shrink: 0;
}
```
MDN documentation:
- [flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)
---
## grow
```js
makeStyles({
root: {
flexGrow: 1,
},
})
```
```css
.flex-item {
flex-grow: 1;
}
```
MDN documentation:
- [flex-grow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow)
---
## order
_`1` is used below as an example value_
```js
makeStyles({
root: {
order: 1,
},
})
```
```css
.flex-item {
order: 1;
}
```
MDN documentation:
- [order](https://developer.mozilla.org/en-US/docs/Web/CSS/order)
---
## shrink
_`1` is used below as an example value_
```js
makeStyles({
root: {
flexShrink: 1,
},
})
```
```css
.flex-item {
flex-shrink: 1;
}
```
MDN documentation:
- [flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)
---
## verticalFill
```js
makeStyles({
root: {
height: "100%",
},
})
```
```css
.flex-item {
height: 100%;
}
```
MDN documentation:
- [height](https://developer.mozilla.org/en-US/docs/Web/CSS/height)