Flexbox

One-dimensional CSS layout system.

html

<div class="fb-wrap" role="img" aria-label="Five flexbox items arranged along a main axis and cross axis, position driven by the controls">
  <div class="fb-parent" style="flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;">
    <div class="fb-item">1</div>
    <div class="fb-item">2</div>
    <div class="fb-item">3</div>
    <div class="fb-item">4</div>
    <div class="fb-item">5</div>
  </div>
  <p class="fb-caption">main axis: row &middot; justify-content: space-between &middot; align-items: center &middot; wrap: no</p>
</div>
<style>
.fb-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }
.fb-parent { display: flex; gap: 8px; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 12px; min-height: 140px; box-sizing: border-box; }
.fb-item { background: #BFD9F2; border-radius: 6px; width: 76px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.fb-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[320px]" role="img" aria-label="Five flexbox items arranged along a main axis and cross axis, position driven by the controls">
  <div class="flex gap-2 bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-3 min-h-[140px] box-border" style="flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;">
    <div class="bg-[#BFD9F2] rounded-md w-[76px] h-10 shrink-0 flex items-center justify-center font-bold">1</div>
    <div class="bg-[#BFD9F2] rounded-md w-[76px] h-10 shrink-0 flex items-center justify-center font-bold">2</div>
    <div class="bg-[#BFD9F2] rounded-md w-[76px] h-10 shrink-0 flex items-center justify-center font-bold">3</div>
    <div class="bg-[#BFD9F2] rounded-md w-[76px] h-10 shrink-0 flex items-center justify-center font-bold">4</div>
    <div class="bg-[#BFD9F2] rounded-md w-[76px] h-10 shrink-0 flex items-center justify-center font-bold">5</div>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80">main axis: row &middot; justify-content: space-between &middot; align-items: center &middot; wrap: no</p>
</div>

react

export function Flexbox({
  direction = "row",
  justify = "space-between",
  align = "center",
  wrap = false,
}) {
  const item = { background: "#BFD9F2", borderRadius: 6, width: 76, height: 40, flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700 };
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 320 }}
      role="img" aria-label="Five flexbox items arranged along a main axis and cross axis, position driven by the controls">
      <div style={{ display: "flex", gap: 8, flexDirection: direction, justifyContent: justify, alignItems: align,
        flexWrap: wrap ? "wrap" : "nowrap", background: "#FAF7F2", border: "1.5px dashed #24143055", borderRadius: 8, padding: 12, minHeight: 140, boxSizing: "border-box" }}>
        <div style={item}>1</div><div style={item}>2</div><div style={item}>3</div><div style={item}>4</div><div style={item}>5</div>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>
        main axis: {direction} &middot; justify-content: {justify} &middot; align-items: {align} &middot; wrap: {wrap ? "yes" : "no"}
      </p>
    </div>
  );
}