Fulfledge

Control how things line up

INPUT · Slides

Stack them downwards on a narrow screen

01 / 05

The parent can decide the direction too

display: flex; has been putting things across from the start. That is really just the direction being fixed at row.

The direction is something you change on the parent.

02 / 05

column makes it vertical

Write flex-direction: column; and the children line up from top to bottom.

It means the CSS you wrote for a row switches to a column with a single value.

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

03 / 05

How is it different from just stacking

A div stacks downwards anyway, so why bother writing column? Because you can switch it by width.

row when wide, column when narrow. All it takes is rewriting the same property on the same parent.

@media (max-width: 670px) {  .cards {    flex-direction: column;  }}

04 / 05

When vertical, put the space below

A row wants gaps at the sides; a stack wants gaps above and below. Turn the margin round with it.

You can drop the width setting. Filling the width is natural when things are stacked.

@media (max-width: 670px) {  .card {    margin: 0 0 8px;  }}

05 / 05

You can work the arrangement now

Lining up what this chapter covered:

  • write one line on the parent and go across
  • share the leftover space by ratio
  • wrap children that do not fit
  • combine it with width conditions
  • switch the direction and stack

How a screen is arranged is yours to decide now. Have a go.