时间戳

首页 > 解决方案 > 更改div中的弹性顺序？

html - 更改div中的弹性顺序？

问题描述

我正在尝试有一个 flex-col，图像首先出现在哪里。但是，下面的代码只会在 flex 方向为 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>

标签： htmlcsstailwind-css

解决方案

In order to have classes order-x work, the parent element needs to be 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>

See live example: https://play.tailwindcss.com/AFxRfm5JjN

See doc usage: https://tailwindcss.com/docs/order#usage

推荐阅读