Utilities for controlling how flex items both grow and shrink.
Use flex-initial
to allow a flex item to shrink but not grow, taking into account its initial size:
Items don't grow when there's extra space
Items shrink if possible when needed
<div class="flex">
<div class="flex-initial ...">
<!-- Won't grow, but will shrink if needed -->
</div>
<div class="flex-initial ...">
<!-- Won't grow, but will shrink if needed -->
</div>
<div class="flex-initial ...">
<!-- Won't grow, but will shrink if needed -->
</div>
</div>
Default behavior
With .flex-1
<div class="flex">
<div class="flex-1 ...">
<!-- Will grow and shrink as needed without taking initial size into account -->
</div>
<div class="flex-1 ...">
<!-- Will grow and shrink as needed without taking initial size into account -->
</div>
<div class="flex-1 ...">
<!-- Will grow and shrink as needed without taking initial size into account -->
</div>
</div>
Default behavior
With .flex-auto
<div class="flex ...">
<div class="flex-auto ...">
<!-- Will grow and shrink as needed taking initial size into account -->
</div>
<div class="flex-auto ...">
<!-- Will grow and shrink as needed taking initial size into account -->
</div>
<div class="flex-auto ...">
<!-- Will grow and shrink as needed taking initial size into account -->
</div>
</div>
<div class="flex ...">
<div class="flex-1 ...">
<!-- Will grow and shrink as needed -->
</div>
<div class="flex-none ...">
<!-- Will not grow or shrink -->
</div>
<div class="flex-1 ...">
<!-- Will grow and shrink as needed -->
</div>
</div>
To control how a flex item both grows and shrinks at a specific breakpoint, add a {screen}:
prefix to any existing utility class. For example, use md:flex-1
to apply the flex-1
utility at only medium screen sizes and above.
<div class="flex ...">
<!-- ... -->
<div class="flex-none md:flex-1 ...">
Responsive flex item
</div>
<!-- ... -->
</div>
For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.
By default, Tailwind provides four flex
utilities. You change, add, or remove these by editing the theme.flex
section of your Tailwind config.
// tailwind.config.js
module.exports = {
theme: {
flex: {
'1': '1 1 0%',
auto: '1 1 auto',
- initial: '0 1 auto',
+ inherit: 'inherit',
none: 'none',
+ '2': '2 2 0%',
}
}
}
默認情況下, 只有 響應式 的 flex 變化模式 (variants) 會產生。
在 tailwind.config.js
的 variants
區塊中變更 flex
屬性來決定有哪些變化模式會生成。
舉個例子來說,這個設定將會生成 響應式 和 hover 的變化模式。
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ flex: ['responsive', 'hover'],
}
}
}
如果你不打算在專案中使用 flex 功能,可以在你的設定檔裡的 corePlugins
屬性中將 flex
設定為 false
來停用功能:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ flex: false,
}
}