CSS Flexbox जनरेटर - Flex लेआउट विज़ुअल बिल्डर ऑनलाइन

// CSS Flexbox Generator - JavaScript

function generateFlexboxCSS(options = {}) {
  const {
    display = 'flex',
    flexDirection = 'row',
    flexWrap = 'nowrap',
    justifyContent = 'flex-start',
    alignItems = 'stretch',
    alignContent = 'stretch',
    rowGap = 0,
    columnGap = 0,
  } = options;

  const rules = [`display: ${display}`];

  if (flexDirection !== 'row') rules.push(`flex-direction: ${flexDirection}`);
  if (flexWrap !== 'nowrap') rules.push(`flex-wrap: ${flexWrap}`);
  if (justifyContent !== 'flex-start') rules.push(`justify-content: ${justifyContent}`);
  if (alignItems !== 'stretch') rules.push(`align-items: ${alignItems}`);
  if (alignContent !== 'stretch' && flexWrap !== 'nowrap') {
    rules.push(`align-content: ${alignContent}`);
  }
  if (rowGap > 0 || columnGap > 0) {
    if (rowGap === columnGap) {
      rules.push(`gap: ${rowGap}px`);
    } else {
      rules.push(`gap: ${rowGap}px ${columnGap}px`);
    }
  }

  return rules.map(r => `${r};`).join('\n');
}

function generateFlexItemCSS(options = {}) {
  const {
    flexGrow = 0,
    flexShrink = 1,
    flexBasis = 'auto',
    order = 0,
    alignSelf = 'auto',
  } = options;

  const rules = [];
  if (flexGrow !== 0 || flexShrink !== 1 || flexBasis !== 'auto') {
    rules.push(`flex: ${flexGrow} ${flexShrink} ${flexBasis}`);
  }
  if (order !== 0) rules.push(`order: ${order}`);
  if (alignSelf !== 'auto') rules.push(`align-self: ${alignSelf}`);

  return rules.map(r => `${r};`).join('\n');
}

// Usage
console.log(generateFlexboxCSS({
  justifyContent: 'center',
  alignItems: 'center',
  rowGap: 16,
  columnGap: 16,
}));
// display: flex;
// justify-content: center;
// align-items: center;
// gap: 16px;