如何在顺风中将 flexbox 扩展为填充

Question

我如何将那个弹性框放在所有蓝色背景上

我附上一张它的样子：

此处使用 Tailwind-CSS 编写代码：

<!-- Tailwind + Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel=”stylesheet” href=”https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css”>
<script src="https://unpkg.com/feather-icons"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<!-- Body -->
<header class="bg-blue-default flex justify-between p-3.5 text-xs m-0">
  <div class="flex justify-between text-white-grayed">
    <a class="pl-4 pr-4 hover:text-white-default border-r border-white-default" href="">info@example.eu</a>
    <a class="hover:text-white-default" href="">+000 000 000 000</a>
  </div>
  <div>

  </div>
</header>

Answer 1

你快到了。您的标头已经是一个 flexbox 并且占据了整个宽度。但是，您的第一个孩子 (div) 只占用所需的空间。您需要添加 w-full 以使 div 占据所有可用宽度，并在整个宽度内对齐其项目。

<!-- Tailwind + Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel=”stylesheet” href=”https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css”>
<script src="https://unpkg.com/feather-icons"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<!-- Body -->
<header class="bg-blue-default flex justify-between p-3.5 text-xs m-0">
  <div class="w-full flex justify-between items-center text-white-grayed">
    <a class="pl-4 pr-4 hover:text-white-default border-r border-white-default" href="">info@example.eu</a>
    <a class="hover:text-white-default" href="">+000 000 000 000</a>
  </div>
</header>

Answer 2

仅从标题中删除 flex 类

使用这个

<header class="bg-blue-default justify-between p-3.5 text-xs m-0">

而不是

<header class="bg-blue-default flex justify-between p-3.5 text-xs m-0">