andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
0049cdfec8b1a2ce57b0e8a4208544369823f4e5
30-seconds-of-code/snippets/evenly-distributed-childs.md
tzaluzhny 0049cdfec8 Adding evenly distributed childs snippet
2018-02-28 13:18:14 +02:00

1.1 KiB
Raw Blame History

Evenly distributed childs

Evenly distributed childs within the alignment container

HTML

<div class="evenly-distributed-childs">
  <p class="child">Item1</p>
  <p class="child">Item2</p>
  <p class="child">Item3</p>
</div>

CSS

.evenly-distributed-childs {
  display: flex;
  width: 300px;
  justify-content: space-between;
}

Demo

Item1

Item2

Item3

<style> .snippet-demo__evenly-distributed-childs { display: flex; width: 100%; justify-content: space-between; } </style>

Explanation

  1. display: flex enables flexbox.
  2. justify-content: space-between evenly distributes childs in the line.

First item will be on the start line, last item on the end line

Browser support

⚠️ Needs prefixes for full support.