在尺寸较小的=<设备上将项目集中对齐

Question

我有一个卡片组件，它在小型移动设备上的屏幕大小上呈现如下所示的第一个图像。我将组件设置为flex-wrap。当flex-wrap处于活动状态时，我的图像会被推到卡片的左侧，即使它的容器设置为w-full，并且我已经尝试使用justify-center居中。我试图只在设备较小或较小的情况下才将图像居中。我试过设置sm: justify-center，但它不起作用。有谁知道如何重构才能让这个功能正常工作吗？谢谢

import React from "react"

export default function FeatureCard(props) {
  return (
    <div className="flex flex-row flex-wrap w-2/3 h-auto bg-gray-200 p-2 rounded-lg">
      <div className="flex xl:w-1/3 lg:w-1/3 md:w-1/3 sm:w-full xs:w-full">
        <img src={props.image} />
      </div>
      <div className="flex xl:w-2/3 lg:w-2/3 md:w-2/3 sm:w-full xs:w-full text-center self-center justify-center font-bold">
        <ul>
          {props.features.map(feature => (
            <li>{feature}</li>
          ))}
        </ul>
      </div>
    </div>
  )
}

      <div className="flex flex-row flex-wrap w-full h-auto justify-center -py-2">
        <div className="flex xl:w-1/2 lg:w-1/2 md:w-full sm:w-full xs:w-full h-auto justify-center py-2">
          <FeatureCard
            features={[
              "Modern Website Design",
              "Progressive Web Applications",
              "Content Management Systems",
              "JAMstack",
            ]}
            image={"https://img.icons8.com/color/96/000000/monitor.png"}
          />
        </div>
</div>

​

​

​

​

Answer 1

所以如果我理解正确的话，你想让props.image居中显示在小屏幕上？

如果您在<div className="flex flex-row flex-wrap w-full h-auto justify-center -py-2">目录中添加了类似这样的内容：

@media (max-width: 600px) {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }

它基本上做的是，当屏幕小于600px时，将flex方向更改为列而不是行，这在顺风css中可能转换为：

sm:flex-col sm:justify-center sm:items-center