Commonly Used Flex Styles
响应式: 导航栏
<div>
<div className="mx-auto px-4 w-full max-w-7xl border-2">
<div className="flex justify-around items-center">
<Link href="/" className="text-blue-600 dark:text-blue-400">首页</Link>
<Link href="/discuss" className="text-blue-600 dark:text-blue-400">讨论</Link>
<Link href="/search" className="text-blue-600 dark:text-blue-400">搜索</Link>
</div>
</div>
</div>
max-w-7xl
限制最大宽度在 7xl 以内, 注意w-full
并不多余, 因为盒子可能不会自动占满整个宽度, 它确保了容器行为的可预测性水平方向:
justify-around
控制 flex 子元素在主轴(默认是水平方向)上的分布, 子元素会平均分布,每个元素两侧有相等的空间, 与justify-between
的区别是,around
在两端也会留有空间(约为中间空间的一半)垂直方向居中:
items-center
: 控制 flex 子元素在交叉轴(默认是垂直方向)上的对齐方式
一个盒子, 两端各放一个
<div class="flex flex-between">
<div>Left element</div>
<div>Right element</div>
</div>
常用技巧:
- justify-between 主要是用来设置 flex items 之间的间距, 一般是让两个元素分布在容器左右或上下两端,
- 聊天软件, 自己信息靠右, 对方信息靠左, 不可以使用
justify-self
或align-self
, 前者是用于 Grid 布局的, 后者是用于 Flex 布局的交叉轴上的对齐方式. 更不可以单独对一个元素设置justify-start
或justify-end
, 因为这是 flex box 的属性, 会影响所有的 flex items, 而不是单个元素. 你可以使用margin-left: auto
或margin-right: auto
来实现这个效果.mx-auto
用于水平居中,my-auto
用于垂直居中,- 也可使用 order 属性来调整元素的顺序, 配合 justify-between 使用 (控制在两端, 一左一右), 只有两个元素这种简单情况下推荐使用.
export default function Message({role, text, time}) {
const messageClass = role === 'bot' ? 'mr-auto bg-gray-300 text-black' : 'ml-auto bg-blue-300 text-white'
const timePos = role === 'bot' ? 'order-2' : 'order-1'
const rolePos = role === 'bot' ? 'order-1' : 'order-2'
const sentTime = new Date(time).toLocaleString()
return (
<div className={messageClass} >
<div className={'flex flex-row justify-between'}>
<span className={rolePos}>{role}</span>
<span className={timePos}>{sentTime}</span>
</div>
<p>{text}</p>
</div>
)
}
3. 水平和垂直居中 - Flex#
3.1 水平居中#
对于 flex-row
主轴就是水平方向, 简单使用 justify-center (沿主轴方向操作 flex items) 即可使 flex items 水平居中.
<div className="flex flex-row justify-center">
...
</div>
对于 flex-col
主轴就是垂直方向, 使用 items-center (沿交叉轴方向操作 flex items) 即可使 flex items 水平居中.
<div className="flex flex-col items-center h-64 border-2">
<button className={'border-2'}>hello</button>
<button className={'border-2'}>hello</button>
</div>
你也可以使用 mx-auto, 但 mx-auto 只作用于块级元素, 因此你可能需要把 flex items 改为块级元素, 别忘了 flex items 既不是块级元素也不是行内元素, 你需要将其父的 display: flex 去掉.
2.2. Flex Items#
- flex-grow: 用来指定一个 flex 子项(flex item)相对于其他子项在可用空间中的扩展比例, 沿主轴方向。
- Tailwind CSS 类名:
flex-grow
,flex-grow-0
- Tailwind CSS 类名:
- align-self: 用来指定flex子项在交叉轴上的对齐方式, 会覆盖父容器的 align-items 属性。
- 很好理解, align-self 是用来指定单个 flex item 在交叉轴上的对齐方式, 而 align-items 是用来指定所有 flex items 在交叉轴上的对齐方式. 前者用在 item上, 后者用在 flex box 上, 前者会覆盖后者.
- Tailwind CSS 类名:
self-auto
,self-start
,self-center
,self-end
,self-stretch
- 了解更多: Align Self - Tailwind CSS
常用技巧-1: 把 navigator 和 footer 设置为
flex-grow: 0
, 然后中间的内容设置为flex-grow: 1
, 这样中间的内容会占据剩余的空间, 从而实现中间内容自动填充剩余空间的效果. (前提是他们都是 flex items, 即他们都在 flex box 内)
常用技巧-2: 通常把元素设置为 flex-grow 后, 会自动填充剩余空间, 但如果该元素的内容很多, 就会导致溢出, 比如对话框, 此时应该会想到加个 overflow 属性, 但是这样并不会起作用, 原因是你没设置该元素的高度, 此时可以给个高度0, 这样即使内容为空因为 flex-grow 会自动填充剩余空间, 若内容溢出因为定义了高度, overflow 属性就会起作用了. 了解更多: https://stackoverflow.com/a/14964944/16317008
易错点-1: flex-grow 是 flex items 的属性, 用来控制 flex tiems 如何在主轴方向上增长, 不要简单的以为是用来控制在水平方向上增长的. 比如在 flex-col 的情况下,flex-grow 影响的是items的高度,而不是宽度,因为主轴是垂直的.
易错点-2: justify-items
和 justify-self
专门用于Grid布局, 不用于Flex布局, 了解更多: Justify Items - Tailwind CSS