@casoon/dragonfly/layout/flex-layouts.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Flex Layout System
 * 
 * A comprehensive flexbox-based layout system providing flexible and responsive
 * layout utilities for modern web applications. This system offers semantic
 * flexbox classes with intuitive naming conventions.
 * 
 * @layer layout.flex
 * @version 2.0
 * @author Design System Team
 * 
 * FEATURES:
 * - Complete flexbox utility system
 * - Semantic layout components (.layout-flex-*)
 * - Direction, wrapping, and alignment utilities
 * - Flexible item sizing with flex-basis utilities
 * - Self-alignment controls for individual items
 * - Grow and shrink utilities for dynamic layouts
 * - Works seamlessly with CSS Grid system
 * - Responsive-ready with breakpoint variants
 * 
 * FLEX CONTAINER CLASSES:
 * - .flex: Base flex container
 * - .inline-flex: Inline flex container
 * - .flex-row: Horizontal direction (default)
 * - .flex-col: Vertical direction
 * - .flex-wrap: Allow wrapping
 * - .flex-nowrap: Prevent wrapping
 * 
 * ALIGNMENT CLASSES:
 * - .items-start: Align items to start
 * - .items-center: Center align items
 * - .items-end: Align items to end
 * - .items-stretch: Stretch items to fill
 * - .items-baseline: Baseline alignment
 * - .justify-start: Justify content to start
 * - .justify-center: Center justify content
 * - .justify-end: Justify content to end
 * - .justify-between: Space between items
 * - .justify-around: Space around items
 * - .justify-evenly: Even space distribution
 * 
 * FLEX ITEM CLASSES:
 * - .flex-1: Grow and shrink equally
 * - .flex-auto: Grow and shrink based on content
 * - .flex-none: Don't grow or shrink
 * - .flex-initial: Initial flex value
 * - .flex-grow: Allow growing
 * - .flex-shrink: Allow shrinking
 * 
 * FLEX BASIS UTILITIES:
 * - .flex-basis-1-2: 50 basis
 * - .flex-basis-1-3: 33.33% basis
 * - .flex-basis-2-3: 66.67% basis
 * - .flex-basis-1-4: 25% basis
 * - .flex-basis-3-4: 75% basis
 * - .flex-basis-1-5: 20 basis
 * - .flex-basis-2-5: 40 basis
 * - .flex-basis-3-5: 60 basis
 * - .flex-basis-4-5: 80 basis
 * 
 * SELF-ALIGNMENT:
 * - .self-auto: Auto alignment
 * - .self-start: Align self to start
 * - .self-center: Center align self
 * - .self-end: Align self to end
 * - .self-stretch: Stretch self
 * 
 * LAYOUT COMPONENTS:
 * - .layout-flex: Semantic flex column with gap
 * - .layout-flex-row: Semantic flex row with gap
 * - .layout-flex-column: Semantic flex column with gap
 * - .layout-flex-between: Space-between layout
 * - .layout-flex-center: Centered layout
 * 
 * USAGE EXAMPLES:
 * 
 * Basic Flex Layout:
 * <div class="flex items-center justify-between">
 *   <div>Logo</div>
 *   <nav class="flex gap-4">
 *     <a href="#">Home</a>
 *     <a href="#">About</a>
 *   </nav>
 * </div>
 * 
 * Card Layout:
 * <div class="flex flex-col gap-4">
 *   <h2>Card Title</h2>
 *   <p class="flex-1">Card content that grows</p>
 *   <button>Action</button>
 * </div>
 * 
 * Responsive Layout:
 * <div class="flex flex-col md:flex-row gap-6">
 *   <main class="flex-1">Main content</main>
 *   <aside class="flex-basis-1-3">Sidebar</aside>
 * </div>
 * 
 * Complex Alignment:
 * <div class="flex flex-wrap items-start justify-center gap-4">
 *   <div class="flex-basis-1-3 self-stretch">Item 1</div>
 *   <div class="flex-basis-1-3 self-center">Item 2</div>
 *   <div class="flex-basis-1-3 self-end">Item 3</div>
 * </div>
 * 
 * RESPONSIVE USAGE:
 * Use with responsive-utilities.css for breakpoint-specific layouts:
 * <div class="flex-col sm:flex-row items-center sm:items-start">
 *   <!-- Responsive flex direction and alignment -->
 * </div>
 * 
 * BROWSER SUPPORT:
 * - Flexbox: All modern browsers (IE 11+ with -ms- prefix)
 * - Gap property: Chrome 84+, Firefox 63+, Safari 14.1+
 * - Fallback: Use margin utilities for older browsers
 * 
 * PERFORMANCE NOTES:
 * - Flexbox is highly optimized for one-dimensional layouts
 * - Use CSS Grid for two-dimensional layouts
 * - Gap property is more performant than margins
 * - Avoid deep nesting of flex containers
 * 
 * ACCESSIBILITY:
 * - Flex layouts maintain document flow for screen readers
 * - Use semantic HTML elements within flex containers
 * - Be careful with flex-direction: column and tab order
 * - Test with keyboard navigation
 * - Consider using order property sparingly
 * 
 * INTEGRATION:
 * - Complements layout/grid-system.css for hybrid layouts
 * - Works with layout/spacing.css for gap utilities
 * - Enhanced by layout/responsive-utilities.css for responsive variants
 * - Compatible with layout/containers.css for container sizing
 * 
 * BEST PRACTICES:
 * - Use flexbox for one-dimensional layouts (rows or columns)
 * - Use CSS Grid for two-dimensional layouts
 * - Prefer gap over margins for spacing
 * - Use semantic layout components for common patterns
 * - Test responsive behavior across breakpoints
 * - Ensure accessibility with proper HTML structure
 */

@layer layout.flex {
    /* ================= FLEX-LAYOUT-SYSTEM ================= */

    .layout-flex {
        display: flex;
        flex-direction: column;
        gap: var(--grid-gutter, 1rem);
    }
    
    /* Typische Flex-Layouts */
    .layout-flex-row {
        display: flex;
        flex-direction: row;
        gap: var(--grid-gutter, 1rem);
    }
    
    .layout-flex-column {
        display: flex;
        flex-direction: column;
        gap: var(--grid-gutter, 1rem);
    }
    
    /* Verteilte Layouts */
    .layout-flex-between {
        display: flex;
        flex-direction: row;
        gap: var(--grid-gutter, 1rem);
        justify-content: space-between;
    }
    
    .layout-flex-center {
        align-items: center;
        display: flex;
        gap: var(--grid-gutter, 1rem);
        justify-content: center;
    }

    /* ================= FLEX UTILITIES ================= */

    /* Display-Typen */
    .flex { display: flex; }

    .inline-flex { display: inline-flex; }

    /* Flex-Richtung und Umbruchverhalten */
    .flex-row { flex-direction: row; }

    .flex-col { flex-direction: column; }

    .flex-wrap { flex-wrap: wrap; }

    .flex-nowrap { flex-wrap: nowrap; }

    /* Ausrichtung von Flex-Items */
    .items-start { align-items: flex-start; }

    .items-center { align-items: center; }

    .items-end { align-items: flex-end; }

    .items-stretch { align-items: stretch; }

    .items-baseline { align-items: baseline; }

    .justify-start { justify-content: flex-start; }

    .justify-center { justify-content: center; }

    .justify-end { justify-content: flex-end; }

    .justify-between { justify-content: space-between; }

    .justify-around { justify-content: space-around; }

    .justify-evenly { justify-content: space-evenly; }

    /* Flex-Eigenschaften */
    .flex-1 { flex: 1 1 0; }

    .flex-auto { flex: 1 1 auto; }

    .flex-none { flex: none; }

    .flex-initial { flex: 0 1 auto; }

    /* Flex-Basis für flexible Layouts */
    .flex-basis-1-2 { flex-basis: 50%; }

    .flex-basis-1-3 { flex-basis: 33.3333%; }

    .flex-basis-2-3 { flex-basis: 66.6667%; }

    .flex-basis-1-4 { flex-basis: 25%; }

    .flex-basis-3-4 { flex-basis: 75%; }

    .flex-basis-1-5 { flex-basis: 20%; }

    .flex-basis-2-5 { flex-basis: 40%; }

    .flex-basis-3-5 { flex-basis: 60%; }

    .flex-basis-4-5 { flex-basis: 80%; }

    /* Flex-Grow und Flex-Shrink */
    .flex-grow { flex-grow: 1; }

    .flex-grow-0 { flex-grow: 0; }

    .flex-shrink { flex-shrink: 1; }

    .flex-shrink-0 { flex-shrink: 0; }

    /* Self-Alignment */
    .self-auto { align-self: auto; }

    .self-start { align-self: flex-start; }

    .self-center { align-self: center; }

    .self-end { align-self: flex-end; }

    .self-stretch { align-self: stretch; }
}