☝️ Back to top!
justify-content: space-between
except the last row<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.grid::after {
content: "";
flex: auto;
}
👉 Responsive images - Learn web development | MDN
<img
srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy" />
srcset
: allow browser to choose which file to load, based on sizes
sizes
: (in above example)
(max-width: 600px) 480px
: screen ≤ 600px: The width of the slot
the image will fill when the media condition is true (480px) → choose the image which has the same size or 1st image that is bigger than the chosen slot! → elva-fairy-400w.jpg
elva-fairy-800w.jpg
☝️ Back to top!
px
vs em
vs rem
vs %
px
: not responsive.