點燈坊

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

Using justify-start to Horizontal Left Align

Sam Xiao's Avatar 2022-01-11

justify-start makes Flex Items justify from left to right. This is the default utility for flex.

Version

TailwindCSS 3.0

justify-start

start000

All items are aligned to the left horizontally.

<!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-start">
    <div>Archive</div>
    <div>Series</div>
    <div>Tags</div>
    <div>RSS</div>
  </div>
</body>
</html>

Line 10

<div class="flex justify-start">
  <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-start : all Flex Items are placed at the beginning of the Flex Container with no spaces

Conclusion

  • justify-start makes all Flex Items align from left to right horizontally
  • justify-start is the default utility for flex

Reference

TailwindCSS, justify-start