Flexbox

Меняем направление по оси

			.poem {
			    display: flex;
			    flex-direction: row; /* по умолчанию */
			    flex-direction: row-reverse;
			}
		

Поворачиваем саму ось

			.poem {
			    display: flex;
			    flex-direction: column;
			}
		

Меняем направление по оси

			.poem {
			    display: flex;
			    flex-direction: column-reverse;
			}
		

Перенос

			.poem {
			    display: flex;
			    flex-wrap: nowrap; /* по умолчанию */
			    flex-wrap: wrap;
			}
		

Перенос наоборот

			.poem {
			    display: flex;
			    flex-wrap: wrap-reverse;
			}
		

Вдоль направо

			.poem {
			    display: flex;
			    justify-content: flex-start; /* по умолчанию */
			    justify-content: flex-end;
			}
		

Вдоль посередине

			.poem {
			    display: flex;
			    justify-content: center;
			}
		

Вдоль равномерно

			.poem {
			    display: flex;
			    justify-content: space-between;
			}
		

Вдоль красиво

			.poem {
			    display: flex;
			    justify-content: space-around;
			}
		

Даём высоту

			.poem div {
			    height: 250px;
			}
		

Поперёк внизу

			.poem {
			    display: flex;
			    align-items: flex-start; /* по умолчанию */
			    align-items: flex-end;
			}
		

Поперёк посередине

			.poem {
			    display: flex;
			    align-items: center;
			}
		

Поперёк индивидуально

			.poem div:nth-child(1) {
			    align-self: flex-start;
			}
             
			.poem div:nth-child(4) {
			    align-self: flex-end;
			}
		

Центрирование

			.poem {
			    display: flex;
			}
             
			.poem div {
			    margin: auto;
			}
		

align-content

Порядок поперёк

			.poem {
			    display: flex;
			    align-content: normal; /* по умолчанию */
			    align-content: center;
			}
		

Только для многострочных блоков!

Меняем порядок

			.poem div:nth-child(2) {
			    order: 1;
			}
		

Меняем порядок

			.poem div {
			    order: 4;
			}
		

Меняем порядок

			.poem div:nth-child(1) { order: 2 }
			.poem div:nth-child(2) { order: 1 }
			.poem div:nth-child(3) { order: 4 }
			.poem div:nth-child(4) { order: 3 }
		

Растягивание

			.poem div {
			    flex-grow: 1;
			}
		

Растягивание

			.poem div {
			    flex-grow: 1;
			}
			.poem div:nth-child(1) {
			    flex-grow: 4;
			}
		

Сжатие

			.poem div {
			    width: 25%;
			}
			.poem div:nth-child(1) {
			    flex-shrink: 4;
			}
		

Запас

			.poem div {
			    flex-grow: 1;
			}
			.poem div:nth-child(1) {
			    flex-basis: 250px;
			}