顺风 css flex-col-reverse 不起作用答案

【问题标题】：tailwind css flex-col-reverse not working顺风 css flex-col-reverse 不起作用
【发布时间】：2021-10-20 04:14:43
【问题描述】：

我目前正在研究组件的响应式样式，其中在大屏幕上，我的 div 与文本元素位于包含 img 元素的 div 顶部，而在中小屏幕上，div 与图像右对齐在带有文本元素的 div 下方。我正在使用 Next.js 和 Tailwind CSS 进行样式设置。

样式在大屏幕上效果很好，但由于某种原因，当我在父元素中已经有 flex flex-col-reverse 时，带有文本元素的 div 没有显示在小屏幕中

下面是整个代码的样子：

import React from 'react'
import Image from 'next/image'
import catImage from '../assets/catImage.webp'

const LargeCard = () => {
  return (
    <article className='relative flex flex-col-reverse h-screen py-16 lg:h-96' >
      <div>
        <Image src={catImage} 
          layout='fill'
          objectFit='cover'
          className='rounded-2xl'      
        />
      </div>
      <div className='h-96 lg:absolute lg:top-32 lg:left-12' >
        <h2 className='text-white text-4xl font-semibold mb-3 w-64' >Cat Ipsum</h2>
        <p className='text-lg  lg:w-[300px] text-white' >Stretch out on bed i heard this rumor where the humans are our owners, pfft, what do they know?!</p>
        <button className='bg-gray-100 text-gray-900 px-4 py-2 rounded-lg mt-5 max-w-md ' >Learn more</button>
      </div>
    </article>
  )
}

export default LargeCard

tailwind.config.js：

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    maxWidth: {
      md: '90vw'
    }
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('tailwind-scrollbar-hide')
  ],
}

【问题讨论】：

标签： reactjs next.js tailwind-css

【解决方案1】：

忘记发布答案了。我居然第二天就解决了。

首先。 flex-col-reverse 确实有效。

第二。将 nextjs 的 <Image> 组件的 objectFit 属性设置为 cover 将设置 img 元素以覆盖其祖父元素的整个区域，以便包含它，您将位置 relative 添加到包含它的父 div 并确保定义它的高度。

类似这样的：

<div className='relative h-96'>
  <Image src={catImage} 
    layout='fill'
    objectFit='cover'
    className='rounded-2xl'      
   />
 </div>

【讨论】：