플렉스박스 정렬

<div class="wrap">
  <div class="labels">
    <span class="lbl j" id="jl">justify-content: flex-start</span>
    <span class="lbl a" id="al">align-items: stretch</span>
  </div>
  <div class="box" id="box">
    <div class="chip"><b></b></div>
    <div class="chip"><b></b><b></b><b></b></div>
    <div class="chip"><b></b><b></b></div>
  </div>
</div>

.wrap{width:min(92%,560px);display:flex;flex-direction:column;gap:12px;align-items:center}
.labels{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.lbl{font:700 clamp(9px,1.6vmin,11px)/1 ui-monospace,monospace;padding:5px 9px;border-radius:6px;
  background:var(--surface);border:1px solid var(--line);color:var(--accent-2);white-space:nowrap}
.lbl.a{color:var(--accent-3)}
.box{width:100%;height:min(62%,190px);border:2px dashed var(--muted);border-radius:10px;padding:10px;
  display:flex;gap:10px;transition:justify-content .6s,align-items .6s}
.chip{width:19%;border-radius:8px;background:var(--accent);color:#fff;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:4px;padding:8px 0;transition:background .3s}
.chip b{display:block;width:44%;height:5px;border-radius:3px;background:rgba(255,255,255,.85)}

const box = document.getElementById('box');
const jl = document.getElementById('jl');
const al = document.getElementById('al');
const combos = [
  { j: 'flex-start', a: 'stretch' },
  { j: 'center', a: 'flex-start' },
  { j: 'space-between', a: 'center' },
  { j: 'space-around', a: 'flex-end' },
  { j: 'flex-end', a: 'stretch' },
  { j: 'space-evenly', a: 'center' },
];
let i = 0;
function apply() {
  const c = combos[i % combos.length];
  box.style.justifyContent = c.j;
  box.style.alignItems = c.a;
  jl.textContent = 'justify-content: ' + c.j;
  al.textContent = 'align-items: ' + c.a;
  i++;
}
apply();
setInterval(apply, 1900);