Flex Grow: Complete Guide to CSS Flexbox Space Distribution

Modern web layouts demand flexible, responsive design that adapts seamlessly to any screen size or content variation. Flex-grow is a powerful CSS property that enables intelligent space distribution in flexbox layouts, forming the foundation of responsive design systems and automated component architectures. At Digital Thrive, we leverage flex-grow extensively in our custom web development projects to create dynamic, user-friendly interfaces that perform flawlessly across all devices.

Flex Grow Fundamentals

What is Flex Grow?

  **Flex-grow** is a CSS property that defines how flex items within a flex container should grow to fill available positive free space. It specifies the proportion of remaining space that each flex item should occupy when the container is larger than the combined size of all items. This property is essential for creating responsive layouts that automatically adapt to different screen sizes and content variations.

  Unlike fixed-width layouts, flex-grow enables components to scale intelligently, ensuring optimal use of available space while maintaining visual hierarchy and user experience. This capability is particularly valuable in modern [AI automation](/services/ai-automation/) systems where content length, viewport size, and user preferences can vary dramatically.




How Does Flex Grow Work?

  The flex-grow property accepts unitless number values that represent ratios, not absolute measurements. These values determine how items compete for available space within their flex container.

  ```css
  /* Default value - item won't grow */
  .item {
    flex-grow: 0;
  }

  /* Equal growth for all items */
  .item {
    flex-grow: 1;
  }

  /* Custom ratio - this item gets 2x the space of flex-grow: 1 items */
  .featured-item {
    flex-grow: 2;
  }

  /* Decimal values are supported for precise control */
  .secondary-item {
    flex-grow: 0.5;
  }
  ```

  The flex-grow property works in conjunction with other flex properties:
  - **flex-shrink**: Controls how items shrink when container space is limited
  - **flex-basis**: Defines the initial size of items before space distribution
  - **flex**: Shorthand property that combines all three values




The Mathematics of Space Distribution

  When flex items have different flex-grow values, the available space is distributed according to the ratio defined by their flex-grow factors. Understanding this mathematical relationship is crucial for precise layout control.

  ```css
  .container {
    display: flex;
    width: 1000px;
  }

  .item1 {
    flex-basis: 100px;
    flex-grow: 1;
  }

  .item2 {
    flex-basis: 100px;
    flex-grow: 2;
  }

  .item3 {
    flex-basis: 100px;
    flex-grow: 1;
  }
  ```

  In this example:
  - Total used space: 300px (100px × 3 items)
  - Available space: 700px (1000px - 300px)
  - Flex-grow total: 4 (1 + 2 + 1)
  - Item1 gets: 175px additional space (700px ÷ 4 × 1)
  - Item2 gets: 350px additional space (700px ÷ 4 × 2)
  - Item3 gets: 175px additional space (700px ÷ 4 × 1)

  This mathematical approach ensures consistent, predictable layout behavior across different screen sizes and content scenarios.

Pro Tip

Always consider the content hierarchy when setting flex-grow values. Primary content should typically have higher flex-grow values to ensure it receives more space as the container expands.

Practical Use Cases for Flex Grow

Navigation Bars
Equal Height Cards
Full-Page Layouts



Create navigation layouts that automatically adapt to different screen sizes while maintaining brand consistency and usability.

```css
.navbar {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  min-height: 60px;
}

.logo {
  flex-grow: 0;
  flex-shrink: 0;
  margin-right: 2rem;
}

.nav-items {
  flex-grow: 1;
  display: flex;
  gap: 1rem;
}

.search {
  flex-grow: 0;
  flex-shrink: 0;
  margin-right: 1rem;
}

.user-menu {
  flex-grow: 0;
  flex-shrink: 0;
}
```

This pattern ensures the navigation items expand to fill available space while keeping the logo, search, and user menu at their optimal sizes. Our web development team uses this approach extensively for [marketing automation](/guides/ai-&-automation/marketing-automation/) platforms and content-heavy applications.



Ensure cards in a grid have equal heights regardless of content, creating clean, professional layouts that enhance user experience.

```css
.card-container {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.card {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 300px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  flex-grow: 0;
  padding: 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.card-content {
  flex-grow: 1;
  padding: 1rem;
}

.card-footer {
  flex-grow: 0;
  padding: 1rem;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}
```

This technique is particularly valuable for product galleries, service listings, and content grids where consistent card heights improve visual appeal and readability.



Use flex-grow to make main content fill remaining viewport height, creating immersive experiences that adapt to any screen size.

```css
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  flex-grow: 0;
  flex-shrink: 0;
  height: 80px;
}

.main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.footer {
  flex-grow: 0;
  flex-shrink: 0;
  height: 60px;
}
```

This pattern eliminates the need for complex calculations and ensures consistent footer positioning across all devices, a fundamental requirement for professional web design.

Advanced Flex Grow Patterns

Dynamic Content Distribution

  Create layouts that intelligently adapt to content variations, ensuring optimal use of space regardless of content length or type.

  ```css
  .sidebar-layout {
    display: flex;
    gap: 2rem;
    min-height: 100vh;
  }

  .sidebar {
    flex-basis: 280px;
    flex-grow: 0;
    flex-shrink: 0;
    background: #f8fafc;
    padding: 2rem;
    border-right: 1px solid #e2e8f0;
  }

  .main-content {
    flex-grow: 1;
    min-width: 0; /* Prevents overflow issues */
    padding: 2rem;
  }

  @media (max-width: 768px) {
    .sidebar-layout {
      flex-direction: column;
    }

    .sidebar {
      flex-basis: auto;
      border-right: none;
      border-bottom: 1px solid #e2e8f0;
    }
  }
  ```

  The `min-width: 0` declaration is crucial for preventing overflow issues in flexible layouts, especially when dealing with long content or small screens.




Responsive Grid Systems

  Build flexible grid systems that automatically adapt to container width, providing consistent spacing and alignment without media query complexity.

  ```css
  .grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0 -0.75rem;
  }

  .grid-item {
    flex: 1 1 300px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 300px */
    margin: 0 0.75rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .grid-item-featured {
    flex: 2 1 400px; /* Featured items get more space */
  }

  /* Enhanced breakpoints for finer control */
  @media (max-width: 640px) {
    .grid-item {
      flex: 1 1 100%;
    }
  }

  @media (min-width: 1200px) {
    .grid {
      gap: 2rem;
    }

    .grid-item {
      flex: 1 1 350px;
    }
  }
  ```

  This approach provides exceptional flexibility while maintaining performance and accessibility standards.

Integration with Modern Development Workflows

Component Libraries
CSS-in-JS Integration
Automation Tools



Modern component libraries leverage flex-grow for automated responsive behavior, enabling consistent design systems across large-scale applications.

```jsx
import React from 'react';
import styled from 'styled-components';

const FlexContainer = styled.div`
  display: flex;
  gap: ${props => props.gap || '1rem'};
  flex-direction: ${props => props.direction || 'row'};
  align-items: ${props => props.align || 'stretch'};
  justify-content: ${props => props.justify || 'flex-start'};
  flex-wrap: ${props => props.wrap || 'nowrap'};
`;

const FlexItem = styled.div`
  flex-grow: ${props => props.grow || 0};
  flex-shrink: ${props => props.shrink || 1};
  flex-basis: ${props => props.basis || 'auto'};
  min-width: 0;
`;

// Usage example
const Navigation = () => (
  
    
      
    
    
      
    
    
      
    
  
);
```

This pattern ensures consistent behavior across all components while maintaining developer productivity and code maintainability.



Dynamic flex-grow values based on application state enable interactive, responsive experiences that adapt to user behavior and preferences.

```javascript
import styled, { keyframes } from 'styled-components';

const expandAnimation = keyframes`
  from { flex-grow: 0; }
  to { flex-grow: 1; }
`;

const AnimatedPanel = styled.div`
  flex-grow: ${props => props.isExpanded ? 1 : 0};
  transition: flex-grow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;

  ${props => props.isAnimated && `
    animation: ${expandAnimation} 0.3s ease-out;
  `}
`;

// Usage in React component
const ExpandableSidebar = ({ isExpanded, children }) => {
  return (
    
      {children}
    
  );
};
```

This approach enables sophisticated animations and state-driven layouts while maintaining performance and accessibility standards.



Sass/Less mixins provide consistent flex-grow patterns across large projects, ensuring design system integrity and developer efficiency.

```scss
// Mixins for consistent flex patterns
@mixin flex-container($direction: row, $gap: 1rem, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  gap: $gap;
  flex-wrap: $wrap;
}

@mixin flex-item($grow: 0, $shrink: 1, $basis: auto) {
  flex-grow: $grow;
  flex-shrink: $shrink;
  flex-basis: $basis;
  min-width: 0; // Prevent overflow issues
}

// Specialized mixins for common patterns
@mixin flex-fill {
  @include flex-item(1, 1, 0);
}

@mixin flex-fixed($width) {
  @include flex-item(0, 0, $width);
}

@mixin flex-sidebar($width: 280px) {
  @include flex-fixed($width);
}

// Usage
.sidebar {
  @include flex-sidebar(300px);
}

.main-content {
  @include flex-fill;
}
```

These mixins are particularly valuable for enterprise applications where consistency and maintainability are paramount.





Digital Thrive Integration Approach


Our team integrates flex-grow patterns with comprehensive analytics tracking to monitor layout performance, user engagement, and conversion metrics. This data-driven approach ensures that layout decisions are backed by real user behavior and business outcomes.

Flex Grow in AI-Powered Layout Systems

Automated Layout Optimization

AI-powered design systems can automatically adjust flex-grow values based on multiple factors, creating personalized user experiences that maximize engagement and conversion.

These systems analyze:

• Content importance: Identifying primary versus secondary content based on semantic structure and user engagement patterns
• User interaction patterns: Adapting layouts based on how users navigate and interact with different elements
• Performance metrics: Optimizing flex-grow values for rendering efficiency and perceived performance
• Accessibility requirements: Ensuring proper focus management and screen reader compatibility

// AI-powered layout optimization example
const aiLayoutOptimizer = {
  analyzeContent: (content) => {
    // Machine learning model analyzes content structure and importance
    return contentImportanceScore;
  },

  optimizeFlexGrow: (elements, userContext) => {
    return elements.map(element => ({
      ...element,
      flexGrow: calculateOptimalGrowth({
        contentScore: aiLayoutOptimizer.analyzeContent(element.content),
        userBehavior: userContext.interactionHistory,
        viewportSize: userContext.viewport,
        performanceMetrics: userContext.deviceCapabilities
      })
    }));
  }
};

Machine Learning Integration

Modern AI automation can optimize flex-grow distributions by analyzing vast amounts of user data and interaction patterns, enabling layouts that adapt to individual user preferences and behaviors.

Content Analysis Algorithms:

• Natural language processing identifies primary content sections
• Computer vision analyzes visual hierarchy and balance
• User behavior tracking identifies engagement hotspots

Adaptive Layout Systems:

• Real-time adjustment based on user interaction patterns
• Predictive layout optimization based on user segments
• A/B testing integration for continuous improvement

Performance Optimization:

• Machine learning models predict optimal flex-grow values
• Performance monitoring ensures smooth animations and transitions
• Accessibility compliance maintained through automated testing

Smart Component Systems

AI-enhanced components can dynamically adjust flex-grow values based on context, user preferences, and content analysis, creating truly adaptive user interfaces.

const SmartLayout = ({
  contentType,
  userPreferences,
  viewport,
  contentAnalysis,
  children
}) => {
  const aiOptimizedGrow = calculateOptimalFlex({
    contentType,
    userPreferences: {
      readingStyle: userPreferences.readingStyle || 'standard',
      deviceType: viewport.deviceType,
      interactionPattern: userPreferences.interactionPattern
    },
    viewport: {
      width: viewport.width,
      height: viewport.height,
      orientation: viewport.orientation
    },
    contentAnalysis: {
      importance: contentAnalysis.importanceScore,
      complexity: contentAnalysis.complexityScore,
      engagement: contentAnalysis.predictedEngagement
    },
    businessGoals: {
      conversionPriority: contentAnalysis.conversionPriority,
      userExperienceScore: contentAnalysis.uxScore
    }
  });

  const optimizedStyles = {
    flexGrow: aiOptimizedGrow.growFactor,
    flexBasis: aiOptimizedGrow.basis,
    transition: 'flex-grow 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
    ...aiOptimizedGrow.customProperties
  };

  return (
    
      {children}
    
  );
};

This AI-driven approach represents the future of web layout optimization, combining technical precision with user-centric design principles.

AI-Powered Layout Benefits


• Personalized user experiences based on behavior patterns
• Automated content hierarchy optimization
• Real-time layout adjustments for improved engagement
• Performance optimization through machine learning
• Accessibility compliance through intelligent adaptation

Common Pitfalls and Best Practices

Common Mistakes
Best Practices
Performance



**1. Forgetting flex-basis Configuration**
Items with flex-grow but no basis may not behave as expected, leading to inconsistent layouts across different content scenarios.

```css
/* Problematic */
.item {
  flex-grow: 1;
  /* No flex-basis specified */
}

/* Correct */
.item {
  flex: 1 1 auto; /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */
}
```

**2. Overflow Issues**
Large flex-grow values combined with content that doesn't shrink can cause container overflow, breaking the layout and harming user experience.

```css
/* Prevent overflow with min-width */
.flex-item {
  flex-grow: 1;
  min-width: 0; /* Critical for preventing overflow */
  overflow: hidden; /* Additional safety measure */
}
```

**3. Performance Impact**
Excessive flex recalculations, especially during animations, can significantly impact performance, particularly on mobile devices.

**4. Accessibility Considerations**
Dynamic layout changes can confuse users relying on assistive technologies if not properly managed with ARIA attributes and announcements.



**1. Use Flex Shorthand**
Prefer the flex shorthand property for better performance and code maintainability.

```css
/* Preferred */
.flex-item {
  flex: 1 1 auto; /* grow, shrink, basis */
}

/* Instead of separate properties */
.flex-item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}
```

**2. Set Minimum Constraints**
Prevent overflow and maintain layout integrity with appropriate minimum constraints.

```css
.safe-flex-item {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
```

**3. Content-Driven Flex Values**
Align flex-grow values with content importance and user experience priorities.

**4. Comprehensive Testing**
Verify behavior across different content scenarios, screen sizes, and user interactions.



```css
.optimized-flex-item {
  /* Use will-change for animated flex properties */
  will-change: flex-grow, flex-basis;

  /* Optimize for GPU acceleration */
  transform: translateZ(0);

  /* Smooth, performant transitions */
  transition: flex-grow 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Contain layout recalculations */
  contain: layout;
}

/* For complex animations */
@keyframes flexGrow {
  from {
    flex-grow: 0;
  }
  to {
    flex-grow: 1;
  }
}

.animated-item {
  animation: flexGrow 0.3s ease-out forwards;
}
```

These optimization techniques ensure smooth performance even with complex, dynamic layouts.

Performance Warning

Avoid animating flex-grow properties frequently. For smooth animations, consider using transform or opacity properties instead, and only change flex-grow values during major layout transitions.

Flex Grow vs. Other Layout Methods

When to Use Flex Grow

Ideal Scenarios:

• One-dimensional layouts: Perfect for rows or columns of items
• Component-level spacing: Managing space within UI components
• Responsive navigation: Adapting navigation to different screen sizes
• Equal height containers: Ensuring consistent card or panel heights
• Dynamic content distribution: Handling varying content lengths gracefully
• Form layouts: Aligning form controls and labels efficiently

Flex-grow excels in scenarios where you need to distribute space along a single axis while maintaining alignment and responsiveness. It's particularly effective for component-level layouts and responsive navigation patterns.

When to Consider Alternatives

Use CSS Grid for:

• Two-dimensional layouts: Complex layouts requiring both row and column control
• Complex grid systems: Precise alignment across multiple axes
• Magazine-style layouts: Asymmetric content arrangements
• Precise spatial relationships: When exact positioning is crucial

/* Grid for complex layouts */
.complex-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
  min-height: 100vh;
}

.sidebar {
  grid-column: 1 / 4;
  grid-row: 2;
}

.main-content {
  grid-column: 4 / 13;
  grid-row: 2;
}

Use Container Queries for:

• Component-based responsive design: Layout based on container size rather than viewport
• Modular component systems: Reusable components that adapt to their containers
• Isolated responsive behavior: Components that respond independently of page layout

/* Container query example */
@container (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }

  .card-image {
    flex-grow: 0;
    flex-basis: 200px;
  }

  .card-content {
    flex-grow: 1;
  }
}

Layout Strategy Tip

Combine flexbox with CSS Grid for optimal results. Use flexbox for component-level layouts and grid for page-level structure. This hybrid approach provides the best of both worlds.

Layout Method Comparison

Understanding when to use each layout method ensures optimal results for specific use cases and performance requirements.

Testing and Debugging Flex Grow

Common Debugging Techniques

  **1. Visual Indicators**
  Use browser dev tools to visualize flex item boundaries and understand space distribution.

  ```css
  /* Debugging styles */
  .debug-flex .flex-item {
    outline: 2px solid #3b82f6;
    background: rgba(59, 130, 246, 0.1);
  }

  .debug-flex::before {
    content: 'Debug Mode Active';
    background: #3b82f6;
    color: white;
    padding: 0.5rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    font-size: 12px;
  }
  ```

  **2. Flexbox Inspector**
  Modern browser dev tools include dedicated flexbox inspectors that show grow factors, basis values, and space distribution visually.

  **3. Content Testing**
  Test layouts with various content lengths to ensure robust behavior:

  ```javascript
  // Content variation testing
  const testContent = [
    { type: 'short', content: 'Brief text' },
    { type: 'medium', content: 'Medium length content that spans multiple lines' },
    { type: 'long', content: 'Extremely long content that should test the limits of flex-grow behavior and ensure proper overflow handling' }
  ];
  ```

  **4. Viewport Testing**
  Verify behavior across screen sizes using responsive design testing tools and real device testing.




Automated Testing

  ```javascript
  // Jest and React Testing Library example
  import { render, screen } from '@testing-library/react';
  import '@testing-library/jest-dom';
  import { FlexContainer, FlexItem } from './FlexComponents';

  describe('FlexContainer Component', () => {
    it('should distribute space correctly with different grow values', () => {
      const { getByTestId } = render(
        
          
            Content 1
          
          
            Content 2
          
        
      );

      const container = getByTestId('container');
      const item1 = getByTestId('item1');
      const item2 = getByTestId('item2');

      expect(container).toHaveStyle('display: flex');
      expect(item1).toHaveStyle('flex-grow: 1');
      expect(item2).toHaveStyle('flex-grow: 2');
    });

    it('should handle responsive behavior', () => {
      // Mock viewport size
      Object.defineProperty(window, 'innerWidth', {
        writable: true,
        configurable: true,
        value: 768,
      });

      const { rerender } = render(
        
          Responsive Item
        
      );

      // Test mobile behavior
      Object.defineProperty(window, 'innerWidth', {
        writable: true,
        configurable: true,
        value: 480,
      });

      rerender(
        
          Responsive Item
        
      );

      expect(screen.getByText('Responsive Item')).toBeInTheDocument();
    });
  });
  ```




Performance Testing

  ```javascript
  // Performance testing for flex animations
  const performanceTest = {
    measureFlexAnimation: (element, duration = 1000) => {
      const startTime = performance.now();

      return new Promise(resolve => {
        element.style.flexGrow = '1';

        const observer = new PerformanceObserver(list => {
          const entries = list.getEntries();
          const lastEntry = entries[entries.length - 1];

          if (lastEntry.startTime >= startTime + duration) {
            observer.disconnect();
            resolve({
              duration: lastEntry.startTime - startTime,
              frames: entries.length,
              averageFrameTime: duration / entries.length
            });
          }
        });

        observer.observe({ entryTypes: ['measure', 'navigation'] });
      });
    }
  };
  ```

  Comprehensive testing ensures that flex-grow implementations work reliably across all scenarios and maintain performance standards.

Testing Best Practice

Always test flex-grow layouts with varying content lengths, including empty states and extremely long content. This ensures your layouts are robust and won't break in production.

Future of Flex Grow

Emerging Trends

1. Container Queries Integration Container queries will revolutionize responsive design by enabling components to adapt based on their container size rather than viewport dimensions, making flex-grow even more powerful for modular design systems.

/* Future container query syntax */
@container (min-width: 400px) {
  .component {
    display: flex;
  }

  .primary {
    flex-grow: 2;
  }

  .secondary {
    flex-grow: 1;
  }
}

2. Subgrid and Hybrid Layouts Emerging CSS specifications will enable better integration between flexbox and CSS Grid, allowing developers to combine the strengths of both layout systems for more sophisticated designs.

3. AI-Powered Layout Optimization Machine learning algorithms will automatically optimize flex-grow values based on user behavior, content analysis, and business objectives, creating truly adaptive user experiences.

4. Web Components Enhancement Encapsulated flex patterns will become standard in Web Components, enabling truly reusable layout components that work consistently across different frameworks and applications.

Browser Evolution

Continuous improvements in browser technology are enhancing flex-grow capabilities:

Performance Optimizations:

• Hardware acceleration for flex animations
• Optimized layout calculation algorithms
• Reduced reflow and repaint operations

Developer Experience:

• Enhanced debugging tools and visual inspectors
• Better error messaging for common flex issues
• Integrated accessibility checking

Accessibility Features:

• Improved screen reader support for dynamic layouts

• Better focus management in flexible containers

• Enhanced high contrast mode support

  Future-Proofing Your Layouts

  • Design with container queries in mind • Implement flexible component architectures • Consider AI integration opportunities • Prioritize accessibility from the start • Build modular, reusable patterns

  Digital Thrive Advantage

  Our team stays at the forefront of layout technology evolution, ensuring that your web applications leverage the latest flex-grow capabilities and best practices. We combine technical expertise with business intelligence to create layouts that drive user engagement and business growth.

Conclusion

Flex-grow is a fundamental CSS property that enables sophisticated, responsive layouts essential for modern web applications. From basic navigation bars to complex AI-powered layout systems, understanding flex-grow is crucial for creating exceptional user experiences.

The key takeaways for successful flex-grow implementation:

• Master the fundamentals: Understanding the mathematical relationship between flex-grow values and space distribution
• Consider content hierarchy: Align flex-grow values with content importance and user experience goals
• Test comprehensively: Verify behavior across different content scenarios, screen sizes, and user interactions
• Optimize for performance: Use best practices to maintain smooth animations and responsive behavior
• Embrace automation: Leverage modern marketing tools and AI-powered systems for layout optimization

As web development continues to evolve, flex-grow remains a cornerstone of responsive design, enabling the creation of flexible, user-friendly interfaces that adapt seamlessly to any context. By combining technical expertise with strategic thinking, developers can harness the full potential of flex-grow to create digital experiences that drive engagement and business success.

For businesses looking to leverage advanced layout techniques and AI-powered optimization, Digital Thrive offers comprehensive web development services that integrate cutting-edge technology with proven design principles. Our team ensures that your digital presence not only looks exceptional but also performs flawlessly across all devices and user scenarios.

Sources

1. MDN Web Docs - flex-grow
2. CSS-Tricks - Complete Guide to Flexbox
3. CSS-Tricks - flex-grow Practical Examples
4. DigitalOcean - Flexbox CSS flex-grow Property Explained
5. W3C CSS Flexible Box Layout Module
6. Web.dev - Responsive Design Patterns
7. Can I Use - Flexbox