FLEXBOX 1 CHRIS SAUVE 2 LAYOUT STRATEGIES 3 TABLES 4 JUST - PowerPoint PPT Presentation

<div ¡class="card"> ¡ ¡ ¡<header ¡class="card__section ¡card__section-­‑-­‑ header"> ¡ ¡ ¡ ¡ ¡ ¡<h1 ¡class=“heading">Medium ¡Heading</h1> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡<div ¡class="button-­‑group"> ¡ ¡ ¡ ¡ ¡ ¡ ¡<div ¡class="button-­‑group__primary"> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡<button ¡class="button ¡button-­‑-­‑ primary">Primary ¡Action</button> ¡ ¡ ¡ ¡ ¡ ¡ ¡</div> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡<div ¡class="button-­‑group__secondary"> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡<button ¡class="button">Action ¡1</button> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡<button ¡class="button">Action ¡2</button> ¡ ¡ ¡ ¡ ¡ ¡ ¡</div> ¡ ¡ ¡ ¡ ¡</div> ¡ ¡ ¡</header> ¡ </div> ¡ 93

94

STEP 1 .card__section-­‑-­‑header ¡{ ¡ ¡ ¡display: ¡flex; ¡ ¡ ¡align-­‑items: ¡center; ¡ } ¡ .heading ¡{ ¡ ¡ ¡flex: ¡1 ¡0 ¡auto; ¡ } ¡ .button-­‑group ¡{ ¡ ¡ ¡flex: ¡0 ¡0 ¡auto; ¡ } 95

96

STEP 2 .button-­‑group ¡{ ¡ ¡ ¡display: ¡inline-­‑flex; ¡ ¡ ¡flex-­‑direction: ¡row-­‑reverse; ¡ } ¡ .button-­‑group__primary, ¡ .button-­‑group__secondary ¡{ ¡ ¡ ¡display: ¡flex; ¡ } 97

98

99

STEP 3 .card__section-­‑-­‑header ¡{ ¡ ¡ ¡flex-­‑wrap: ¡wrap; ¡ } 100