Learn HTML and CSS: One item apart

Align-self and order

The ice cream van has a noisy cooling unit: it has to stand at the bottom, away from the tables. And the pizza truck paid for the best spot at the front. Setting one truck apart, without moving the rest.

Exceptions to the rule

With align-self on one item you choose its place on the cross axis, apart from the container's align-items. The same values: flex-start, flex-end, center, stretch and baseline.

With order you change the order in which items stand on the main axis. Every item has order: 0 by default; a smaller number comes earlier, a bigger one later. With equal numbers, the order of the HTML counts.

Careful: order only changes what you see. A screen reader and the Tab key still follow the HTML.

style.css

1.square {2  display: flex;3  align-items: flex-start;4}5.ice-cream {6  align-self: flex-end;7}

foodtruck.example

Try it yourself

The ice cream van should hang in the middle, the other trucks at the top. Nothing changes. Find the mistake.

1.square {2  display: flex;3  align-items: flex-start;4}5.ice-cream {6  align-items: center;7}

1<link rel="stylesheet" href="style.css">2<main>3  <section class="square tall">4    <div class="truck chips">Chips</div>5    <div class="truck ice-cream">Ices</div>6    <div class="truck pizza">Pizza</div>7  </section>8</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8ec;5  color: #2b2118;6}7header {8  padding: 12px 16px;9  background: #264653;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27}28.square {29  margin: 16px 0;30  padding: 12px;31  border-radius: 18px;32  background-color: #efe6d4;33  background-image: radial-gradient(rgb(110 90 60 / 0.16) 1px, transparent 1.5px);34  background-size: 14px 14px;35  box-shadow: inset 0 0 0 1px rgb(110 90 60 / 0.14);36}37.square.tall {38  height: 200px;39}40.square.narrow {41  max-width: 250px;42}43/* A striped awning and two wheels: only for the look. */44.truck {45  position: relative;46  margin-bottom: 6px;47  padding: 16px 14px 12px;48  border-radius: 10px 10px 8px 8px;49  background-color: #e76f51;50  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.85) 0 7px, transparent 7px 14px);51  background-size: 100% 7px;52  background-repeat: no-repeat;53  box-shadow: 0 1px 1px rgb(43 33 24 / 0.12), 0 6px 12px -6px rgb(43 33 24 / 0.35);54  color: #ffffff;55  font-weight: 700;56}57.truck::before,58.truck::after {59  content: "";60  position: absolute;61  bottom: -5px;62  width: 10px;63  height: 10px;64  border-radius: 50%;65  background: #d9cfbb;66  box-shadow: inset 0 0 0 3px #2b2118;67}68.truck::before {69  left: 9px;70}71.truck::after {72  right: 9px;73}74.chips {75  background-color: #e9c46a;76  color: #3a2a00;77}78.taco {79  background-color: #e76f51;80}81.pizza {82  background-color: #2a9d8f;83}84.waffle {85  background-color: #9c6644;86}87.ice-cream {88  padding-top: 30px;89  padding-bottom: 26px;90  background-color: #f4a6c6;91  color: #4a1030;92}93.curry {94  background-color: #f4a261;95  color: #3a1f00;96}97.burger {98  background-color: #6d597a;99}100.soup {101  background-color: #588157;102}103.card {104  padding: 4px 16px;105  border-radius: 12px;106  background: #ffffff;107  box-shadow: 0 1px 2px rgb(43 33 24 / 0.08);108}109.card h2 {110  font-size: 1.15rem;111}112footer {113  padding: 12px 16px;114  background: #264653;115  color: #ffffff;116}

foodtruck.example

Ready for more?

The full lesson has 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

Exceptions to the rule

With align-self on one item you choose its place on the cross axis, apart from the container's align-items. The same values: flex-start, flex-end, center, stretch and baseline.

Careful: order only changes what you see. A screen reader and the Tab key still follow the HTML.

style.css

1.square {2  display: flex;3  align-items: flex-start;4}5.ice-cream {6  align-self: flex-end;7}

foodtruck.example

Try it yourself

The ice cream van should hang in the middle, the other trucks at the top. Nothing changes. Find the mistake.

1.square {2  display: flex;3  align-items: flex-start;4}5.ice-cream {6  align-items: center;7}

1<link rel="stylesheet" href="style.css">2<main>3  <section class="square tall">4    <div class="truck chips">Chips</div>5    <div class="truck ice-cream">Ices</div>6    <div class="truck pizza">Pizza</div>7  </section>8</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8ec;5  color: #2b2118;6}7header {8  padding: 12px 16px;9  background: #264653;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27}28.square {29  margin: 16px 0;30  padding: 12px;31  border-radius: 18px;32  background-color: #efe6d4;33  background-image: radial-gradient(rgb(110 90 60 / 0.16) 1px, transparent 1.5px);34  background-size: 14px 14px;35  box-shadow: inset 0 0 0 1px rgb(110 90 60 / 0.14);36}37.square.tall {38  height: 200px;39}40.square.narrow {41  max-width: 250px;42}43/* A striped awning and two wheels: only for the look. */44.truck {45  position: relative;46  margin-bottom: 6px;47  padding: 16px 14px 12px;48  border-radius: 10px 10px 8px 8px;49  background-color: #e76f51;50  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.85) 0 7px, transparent 7px 14px);51  background-size: 100% 7px;52  background-repeat: no-repeat;53  box-shadow: 0 1px 1px rgb(43 33 24 / 0.12), 0 6px 12px -6px rgb(43 33 24 / 0.35);54  color: #ffffff;55  font-weight: 700;56}57.truck::before,58.truck::after {59  content: "";60  position: absolute;61  bottom: -5px;62  width: 10px;63  height: 10px;64  border-radius: 50%;65  background: #d9cfbb;66  box-shadow: inset 0 0 0 3px #2b2118;67}68.truck::before {69  left: 9px;70}71.truck::after {72  right: 9px;73}74.chips {75  background-color: #e9c46a;76  color: #3a2a00;77}78.taco {79  background-color: #e76f51;80}81.pizza {82  background-color: #2a9d8f;83}84.waffle {85  background-color: #9c6644;86}87.ice-cream {88  padding-top: 30px;89  padding-bottom: 26px;90  background-color: #f4a6c6;91  color: #4a1030;92}93.curry {94  background-color: #f4a261;95  color: #3a1f00;96}97.burger {98  background-color: #6d597a;99}100.soup {101  background-color: #588157;102}103.card {104  padding: 4px 16px;105  border-radius: 12px;106  background: #ffffff;107  box-shadow: 0 1px 2px rgb(43 33 24 / 0.08);108}109.card h2 {110  font-size: 1.15rem;111}112footer {113  padding: 12px 16px;114  background: #264653;115  color: #ffffff;116}

foodtruck.example