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

Posted 2023-03-07

【中文标题】顺风 css flex-col-reverse 不起作用

【英文标题】：tailwind css flex-col-reverse not working

【发布时间】：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')
  ],

【参考方案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>