Container

The container is a fundamental building block for layout in the Flow CSS framework. It ensures that your content is centered and has appropriate padding for different screen sizes.

• 1. How They Work

  The container class adapts its maximum width based on the screen size, ensuring a responsive layout. It helps to center your content and includes padding to prevent content from touching the edges of the viewport.

• 2. Default Container

  To use the default container, simply add the container class to your HTML element. This ensures your content is centered and padded.

                  
  <div class="container">
    <!-- Your content goes here -->
  </div>
                  
                

• 3. Breakpoint Containers

  These classes allow you to have containers that are 100% wide until a specific breakpoint:

                  
  <div class="container-lg">100% wide until large breakpoint</div>
  <div class="container-xl">100% wide until extra large breakpoint</div>
  <div class="container-xxl">100% wide until extra extra large breakpoint</div>
                  
                

• 4. Full-Container

  For scenarios where you need the container to span the full width of the viewport, use the full-container class. This class ensures that the container takes up the entire width of the screen.

                  
  <div class="full-container">
    <!-- Your content goes here -->
  </div>
                  
                

Features

• Responsive Design: The container adjusts its maximum width based on the viewport size, ensuring optimal readability and layout across devices.
• Centered Content: By default, the container centers your content with auto margins.
• Padding: The container includes default padding to ensure your content does not touch the edges of the viewport.

Examples

• Basic Container

                  
  <div class="container">
    <p>This is a basic container. Resize the browser window to see how it adjusts.</p>
  </div>
                  
                

• Breakpoint Containers

                  
  <div class="container-sm">
    <p>100% wide until small breakpoint.</p>
  </div>
  <div class="container-md">
    <p>100% wide until medium breakpoint.</p>
  </div>
  <div class="container-lg">
    <p>100% wide until large breakpoint.</p>
  </div>
  <div class="container-xl">
    <p>100% wide until extra large breakpoint.</p>
  </div>
  <div class="container-xxl">
    <p>100% wide until extra extra large breakpoint.</p>
  </div>