文章/答案/技术大牛

发布

社区首页 >问答首页 >是否更改div中的flex顺序？

问是否更改div中的flex顺序？
EN

Stack Overflow用户

提问于 2021-09-29 00:59:29

回答 2查看 38关注 0票数 0

我在试着做一个flex-col，图像放在第一位。然而，下面的代码只会在伸缩方向为row(左图)时更改顺序。它不能在row上工作。

</head> 
<body>
    <div class="flex-row">
        
        <div class="order-2">
            <h1>Flying Kites</h1>
            <h2>Subheader</h2>
        </div>
      <img class="order-1" src="/examples/images/kites.jpg" alt="Flying Kites">
    </div>
</body>
</html>

css

tailwind-css

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-09-29 01:10:43

为了让类order-x工作，父元素需要是flex

<div class="flex">
  <div class="order-2">
    <h1>Flying Kites</h1>
    <h2>Subheader</h2>
  </div>
  <img class="order-1" src="/examples/images/kites.jpg" alt="Flying Kites">
</div>

查看实时示例：https://play.tailwindcss.com/AFxRfm5JjN

请参阅文档用法：https://tailwindcss.com/docs/order#usage

票数 1

Stack Overflow用户

发布于 2021-09-29 03:22:12

为了使div灵活，父类必须是“flex”才能工作。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69369929

复制

相似问题

问是否更改div中的flex顺序？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否更改div中的flex顺序？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否更改div中的flex顺序？
EN