Tailwind Flex - 宽度全尺寸
Posted
技术标签:
【中文标题】Tailwind Flex - 宽度全尺寸【英文标题】：Tailwind Flex - Width full size 【发布时间】：2021-12-11 04:15:38 【问题描述】：index.html：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without javascript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app" class="bg-red-300"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue：
<template>
<div class="flex flex-col md:flex-row">
<Nav class="bg-gray-300 md:w-1/4" />
<router-view class="bg-yellow-400" />
</div>
</template>
<script>
import Nav from './components/nav_components/Nav.vue';
export default
name: 'App',
components:
Nav,
,
;
</script>
<style></style>
640px Tailwind 的小断点（sm） 768px Tailwind 的中等断点 (md)
直到 768px 我使用 flex-col，对于更大的屏幕尺寸我使用 flex-row，正如您在我的代码中看到的那样嗯。
结果：（0-768px 宽度，flex-col）：
在 640px 和 768px 之间，我的 Nav 和 router-view 容器的宽度都停止扩展，我可以看到我安装应用程序的位置的红色背景。
结果：（>768px 宽度，flex-row）：
在 2050 像素之后，我的容器停止扩展，这导致与之前提到的结果相同。
我能做些什么来解决这个问题？
【问题讨论】：
您好，请将实际代码发布到代码 sn-p，not an image of the code。 嘿，JHeth，我更新了我的帖子。 据我所知，您可能只需将flex-1 添加到黄色路由器视图容器中。没有完整的图片很难判断，但这是您在 Tailwind Play play.tailwindcss.com/v6glusf2M1 上进行单个更改的基本版本如果这不能为您解决问题，那么您的布局中会发生其他事情，您应该使用检查器以查看该空间来自主 App.vue 之外的位置。
嘿 JHeth 感谢您的回复。使用这个标志 flex-1 没有任何改变。这个空间来自路由器视图容器本身。我注意到这两个容器的最大宽度都是 1536 像素，这就是为什么它显示我安装应用程序的 div 的红色背景！所以现在我只需要将最大宽度固定为更高，一切都很好！
通过在 router-view 组件上添加 tailwind 属性 max-w-full 来修复它。感谢您指导我！
【参考方案1】：
最大宽度默认为 1536 像素。将 max-w-full 设置为我的路由器视图容器可以解决问题。
【讨论】：
以上是关于Tailwind Flex - 宽度全尺寸的主要内容，如果未能解决你的问题，请参考以下文章
Flexbox tailwind：无法使子元素的宽度调整内容