andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update and rename evenly-distributed-childs.md to evenly-distributed-children.md

Browse Source
This commit is contained in:
atomiks
2018-02-28 21:47:02 +10:00
committed by GitHub
parent 0049cdfec8
commit b9c5b01edf
2 changed files with 53 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
snippets/evenly-distributed-children.md Normal file
View File

@ -0,0 +1,53 @@
### Evenly distributed children
Evenly distributes child elements within a parent element.
#### HTML
```html
<div class="evenly-distributed-children">
<p>Item1</p>
<p>Item2</p>
<p>Item3</p>
</div>
```
#### CSS
```css
.evenly-distributed-children {
display: flex;
justify-content: space-between;
}
```
#### Demo
<div class="snippet-demo">
<div class="snippet-demo__evenly-distributed-children">
<p>Item1</p>
<p>Item2</p>
<p>Item3</p>
</div>
</div>
<style>
.snippet-demo__evenly-distributed-children {
display: flex;
width: 100%;
justify-content: space-between;
}
</style>
#### Explanation
1. `display: flex` enables flexbox.
2. `justify-content: space-between` evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
Alternatively, use `justify-content: space-around` to distribute the children with space around them, rather than between them.
#### Browser support
<span class="snippet__support-note">⚠️ Needs prefixes for full support.</span>
* https://caniuse.com/#feat=flexbox

54
snippets/evenly-distributed-childs.md
View File

@ -1,54 +0,0 @@
### Evenly distributed childs
Evenly distributed childs within the alignment container
#### HTML
```html
<div class="evenly-distributed-childs">
<p class="child">Item1</p>
<p class="child">Item2</p>
<p class="child">Item3</p>
</div>
```
#### CSS
```css
.evenly-distributed-childs {
display: flex;
width: 300px;
justify-content: space-between;
}
```
#### Demo
<div class="snippet-demo">
<div class="snippet-demo__evenly-distributed-childs">
<p class="snippet-demo__evenly-distributed-childs__child">Item1</p>
<p class="snippet-demo__evenly-distributed-childs__child">Item2</p>
<p class="snippet-demo__evenly-distributed-childs__child">Item3</p>
</div>
</div>
<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
<span class="snippet__support-note">⚠️ Needs prefixes for full support.</span>
* https://caniuse.com/#feat=flexbox