點燈坊

失くすものさえない今が強くなるチャンスよ

Using justify-evenly to Space out the Horizontal Space

Sam Xiao's Avatar 2022-01-12

justify-evenly makes all Flex Items spaced out evenly, even space before the first item and after the last item.

Version

TailwindCSS 3.0

justify-evenly

evenly000

All space between the items is same, even space before the first item and space after the last item.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body>
  <div class="flex justify-evenly">
    <div>Archive</div>
    <div>Series</div>
    <div>Tags</div>
    <div>RSS</div>
  </div>
</body>
</html>

Line 10

<div class="flex justify-evenly">
  <div>Archive</div>
  <div>Series</div>
  <div>Tags</div>
  <div>RSS</div>
</div>
  • flex : make parent element as Flex Container and child element as Flex Item
  • justify-evenly : space before, after and between the Flex Items are same

Conclusion

  • justify-evenly makes all Flex Items space out the horizontal space, but there is a subtle difference between justify-between and justify-around

Reference

TailwindCSS, justify-evenly

# TailwindCSS