弹性大小适应子div

huangapple go评论71阅读模式
英文:

Flex size adapt to child div

问题

我正在使用TailwindCSS来创建我的CSS,并试图弄清楚如何利用flexbox类来使父级div的宽度与子div相同,以便可以将图像和标题居中,而不是居中在页面的中心。我是否需要设置一个空的div来利用这个div右侧的空间,还是需要一个适当执行此操作的flexbox样式?

代码:

<div className="flex flex-col p-5">
  <a
    onClick={() => {
      mediaPlayerState(true);
      setNum(randomYTVideoGenerator(1, 5));
      console.log(num);
    }}
  >
    <Image
      className="pb-1 items-center"
      src="/windows-media-player.png"
      width={50}
      height={50}
    ></Image>
    <div className="text-white font-semibold">媒体播放器</div>
  </a>
</div>

弹性大小适应子div


<details>
<summary>英文:</summary>

I am using TailwindCSS to create my css and trying to figure out how to utilize the flexbox classes to make the parent div be the size of width of my child divs so I can center the image and title without it centering to the center of the page. Would I need to set up an empty div that utilizes the space to the right of this div or a flexbox style that takes this action appropriately?

**Code:**

    &lt;div className=&quot;flex flex-col p-5&quot;&gt;
      &lt;a
        onClick={() =&gt; {
          mediaPlayerState(true);
          setNum(randomYTVideoGenerator(1, 5));
          console.log(num);
        }}
      &gt;
        &lt;Image
          className=&quot;pb-1 items-center&quot;
          src=&quot;/windows-media-player.png&quot;
          width={50}
          height={50}
        &gt;&lt;/Image&gt;
        &lt;div className=&quot;text-white font-semibold&quot;&gt;Media Player&lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;

[![div][1]][1]


  [1]: https://i.stack.imgur.com/dqhW6.png

</details>


# 答案1
**得分**: 0

考虑以下两种方式之一:
- 通过 `w-max` 类将 `width: max-content` 应用于 `<div>` 元素。
- 通过 `inline-flex` 类将 `display: inline-flex` 应用于 `<div>` 元素。

```html
<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->
    <script src="https://cdn.tailwindcss.com"></script>

    <body class="bg-slate-950">
      <div class="flex flex-col p-5 w-max">
        <a>
          <img
            class="pb-1 items-center"
            src="https://picsum.photos/50/50"
            width={50}
            height={50}
          />
          <div class="text-white font-semibold">Media Player</div>
        </a>
      </div>
      
      <div class="inline-flex flex-col p-5">
        <a>
          <img
            class="pb-1 items-center"
            src="https://picsum.photos/50/50"
            width={50}
            height={50}
          />
          <div class="text-white font-semibold">Media Player</div>
        </a>
      </div>

<!-- end snippet -->
英文:

Consider either:

  • Applying width: max-content to the &lt;div&gt; via the w-max class.
  • Applying display: inline-flex instead of display: flex to the &lt;div&gt; via the inline-flex class.

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

&lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;

&lt;body class=&quot;bg-slate-950&quot;&gt;
  &lt;div class=&quot;flex flex-col p-5 w-max&quot;&gt;
    &lt;a&gt;
      &lt;img
        class=&quot;pb-1 items-center&quot;
        src=&quot;https://picsum.photos/50/50&quot;
        width={50}
        height={50}
      /&gt;
      &lt;div class=&quot;text-white font-semibold&quot;&gt;Media Player&lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;inline-flex flex-col p-5&quot;&gt;
    &lt;a&gt;
      &lt;img
        class=&quot;pb-1 items-center&quot;
        src=&quot;https://picsum.photos/50/50&quot;
        width={50}
        height={50}
      /&gt;
      &lt;div class=&quot;text-white font-semibold&quot;&gt;Media Player&lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月26日 00:31:57
  • 转载请务必保留本文链接:https://go.coder-hub.com/76551427.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定