Flex Container

Parent using Flexbox.

html

<div class="fc-wrap" role="img" aria-label="A flex container with four items, arranged by direction, justify-content and align-items">
  <div class="fc-parent" style="flex-direction:row;justify-content:flex-start;align-items:stretch;gap:10px;">
    <div class="fc-item" style="height:36px;">1</div>
    <div class="fc-item" style="height:56px;">2</div>
    <div class="fc-item" style="height:44px;">3</div>
  </div>
  <p class="fc-caption">direction: row &middot; justify-content: flex-start &middot; align-items: stretch &middot; gap 10px</p>
</div>
<style>
.fc-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }
.fc-parent { display: flex; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 12px; min-height: 120px; box-sizing: border-box; }
.fc-item { background: #A8E6C1; border-radius: 6px; width: 56px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.fc-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[320px]" role="img" aria-label="A flex container with four items, arranged by direction, justify-content and align-items">
  <div class="flex bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-3 min-h-[120px] box-border" style="flex-direction:row;justify-content:flex-start;align-items:stretch;gap:10px;">
    <div class="bg-[#A8E6C1] rounded-md w-14 flex items-center justify-center font-bold" style="height:36px;">1</div>
    <div class="bg-[#A8E6C1] rounded-md w-14 flex items-center justify-center font-bold" style="height:56px;">2</div>
    <div class="bg-[#A8E6C1] rounded-md w-14 flex items-center justify-center font-bold" style="height:44px;">3</div>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80">direction: row &middot; justify-content: flex-start &middot; align-items: stretch &middot; gap 10px</p>
</div>

react

export function FlexContainer({
  direction = "row",
  justify = "flex-start",
  align = "stretch",
  gap = 10,
}) {
  const item = { background: "#A8E6C1", borderRadius: 6, width: 56, 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="A flex container with four items, arranged by direction, justify-content and align-items">
      <div style={{ display: "flex", flexDirection: direction, justifyContent: justify, alignItems: align, gap,
        background: "#FAF7F2", border: "1.5px dashed #24143055", borderRadius: 8, padding: 12, minHeight: 120, boxSizing: "border-box" }}>
        <div style={{ ...item, height: 36 }}>1</div>
        <div style={{ ...item, height: 56 }}>2</div>
        <div style={{ ...item, height: 44 }}>3</div>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>
        direction: {direction} &middot; justify-content: {justify} &middot; align-items: {align} &middot; gap {gap}px
      </p>
    </div>
  );
}