Flex Item

Child within Flexbox.

html

<div class="fi-wrap" role="img" aria-label="A flex row of three items; the highlighted middle item's grow, basis, align-self and order are adjustable">
  <div class="fi-parent">
    <div class="fi-item">1</div>
    <div class="fi-item fi-item--target" style="flex-grow:1;flex-basis:auto;align-self:center;order:0;">2 (target)</div>
    <div class="fi-item">3</div>
  </div>
  <p class="fi-caption">grow: 1 &middot; basis: auto &middot; align-self: center &middot; order: 0</p>
</div>
<style>
.fi-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }
.fi-parent { display: flex; gap: 10px; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 12px; min-height: 100px; box-sizing: border-box; }
.fi-item { background: #A8E6C1; border-radius: 6px; padding: 10px; min-width: 40px; display: flex; align-items: center; justify-content: center; font-weight: 600; text-align: center; }
.fi-item--target { background: #F5C2E0; font-weight: 700; }
.fi-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 row of three items; the highlighted middle item's grow, basis, align-self and order are adjustable">
  <div class="flex gap-2.5 bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-3 min-h-[100px] box-border">
    <div class="bg-[#A8E6C1] rounded-md p-2.5 min-w-[40px] flex items-center justify-center font-semibold text-center">1</div>
    <div class="bg-[#F5C2E0] rounded-md p-2.5 min-w-[40px] flex items-center justify-center font-bold text-center" style="flex-grow:1;flex-basis:auto;align-self:center;order:0;">2 (target)</div>
    <div class="bg-[#A8E6C1] rounded-md p-2.5 min-w-[40px] flex items-center justify-center font-semibold text-center">3</div>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80">grow: 1 &middot; basis: auto &middot; align-self: center &middot; order: 0</p>
</div>

react

export function FlexItem({
  grow = 1,
  basis = "auto",
  alignSelf = "center",
  order = 0,
}) {
  const item = { background: "#A8E6C1", borderRadius: 6, padding: 10, minWidth: 40, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600, textAlign: "center" };
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 320 }}
      role="img" aria-label="A flex row of three items; the highlighted middle item's grow, basis, align-self and order are adjustable">
      <div style={{ display: "flex", gap: 10, background: "#FAF7F2", border: "1.5px dashed #24143055", borderRadius: 8, padding: 12, minHeight: 100, boxSizing: "border-box" }}>
        <div style={item}>1</div>
        <div style={{ ...item, background: "#F5C2E0", fontWeight: 700, flexGrow: grow, flexBasis: basis, alignSelf, order }}>2 (target)</div>
        <div style={item}>3</div>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>
        grow: {grow} &middot; basis: {basis} &middot; align-self: {alignSelf} &middot; order: {order}
      </p>
    </div>
  );
}