Xavka

<img srcset=“images/large.jpg  1920w, 
	     images/medium.jpg  960w,
	     images/small.jpg   480w”
      sizes="(min-width: 40em) 33.3vw, 100vw”
        src=“images/medium.jpg"
	alt=“Image description text.”>

Xavka

 <img srcset=“images/large.jpg  1920w, 
	      images/medium.jpg  960w,
	      images/small.jpg   480w”
       sizes=“100vw”
 	 src=“images/medium.jpg"
 	 alt=“Image description text.”>

Xavka

<img src="standard.jpg" srcset="retina.jpg 2x, super-retina.jpg 3x" />

Xavka

<img srcset=“images/large.jpg  1920w, 
	     images/medium.jpg  960w,
	     images/small.jpg   480w"
 	src=“images/medium.jpg"
	alt=“Image description text.”>

Xavka

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Xavka

.flex-container {
  display: flex;
}

Xavka

.flex-container {
  flex-direction: row;
}

Xavka

.flex-container {
  flex-direction: row-reverse;
}

Xavka

.flex-container {
  flex-direction: column;
}

Xavka

.flex-container {
  flex-direction: column-reverse;
}