带卡的Tailwind Flex Box响应式网格问题

时间:2019-05-20 18:09:24

标签: javascript html css reactjs tailwind-css

这是我开始的地方

预览

enter image description here

代码:

iterrows

然后我尝试使它更加间隔,如此处的代码库示例所示: https://codepen.io/codetimeio/pen/RYMEJe

但是每次我尝试添加一些填充和边距时,它都会移到下一行,并且我无法弄清楚为什么这样做或如何停止它

enter image description here

这是我更新的行:

<div class="container my-12 mx-auto">
            <div className="flex flex-wrap ">
              {error ? <p>{error.message}</p> : null}
              {!isLoading ? (
                users.map(user => {
                  const { username, name, email } = user;
                  return (
                    <div
                      key={username}
                      className="w-full md:w-1/2 lg:w-1/3  my-5"
                    >
                      <article class="overflow-hidden rounded-lg shadow-lg">
                        <img
                          alt="Placeholder"
                          className="block h-auto w-full"
                          src="https://picsum.photos/600/400/?random"
                        />
                        <header class="flex items-center justify-between leading-tight p-2 bg-white invisible lg:visible">
                          <h1 class="text-lg">{name}</h1>
                          <p class="text-grey-darker text-sm">
                            {email}
                          </p>
                        </header>
                      </article>
                    </div>

这是我的顺风配置文件

<div key={username} className="w-full md:w-1/2 lg:w-1/3  my-5 mx-5">

我真的很想了解我做错了什么,以便可以将tailwind用作主要的模板框架


根据下面给出的答案,这是更新的代码

module.exports = {
  theme: {
    container: {
      center: true
    },
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px"
    },
    fontFamily: {
      display: ["Gilroy", "sans-serif"],
      body: ["Graphik", "sans-serif"]
    },
    extend: {}
  },
  variants: {},
  plugins: []
};

1 个答案:

答案 0 :(得分:0)

发生这种情况是因为有多余的页边空白,w-1/3的意思是〜width: 33.3333%,如果在页边空白处添加页边空白,则三个不能排成一行。

还有其他方法(宽度考虑到装订线或gap property),但是在这种情况下,您可以只使用填充而不是边距,因为您的卡周围已经有了表示性包装元素。

示例:https://codepen.io/tlgreg/pen/RmLMOx

不相关,但是很少有注释可以查看您的代码:

  • 除非您在配置中使用旧的调色板,否则grey-darker将不起作用。
  • img在v1中默认为block
  • invisiblelg:visible更改visibility,标题将占用空间,如果那不是您想要的空间,则应为hiddenlg:flex