更改div中的弹性顺序？

【问题标题】：Change flex order in div?更改div中的弹性顺序？
【发布时间】：2021-09-29 11:22:12
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

为了使类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

【讨论】：

【解决方案2】：

为了使 div 伸缩，父类必须是 'flex' 才能工作。

【讨论】：

对于 Tailwind CSS，您可以使用他们的 DOCS。对于 CSS，通过类选择器调用 CSS 中的类。