InfoHeap
Tech
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS3 flexbox

    Flexbox container properties

    • display:flex and inline-flex
    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-items
    • align-content

    Flexbox items properties

    • order
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex
    • align-self

    Flexbox cookbooks

    • CSS flexbox - align div vertically and horizontally in center
     
    • Home
    • > Tutorials
    • > CSS
    • > CSS properties
    • > CSS3 flexbox

    CSS align-content – packing multiple flex lines

    on Sep 4, 2016

    The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis. This property has no effect on a single-line flex container.

    Syntax:

    .someflexcontainer {
      display: flex;
      align-content: stretch;
    }

    CSS property align-content

    CSS version: CSS 3
    Value: flex-start | flex-end | center | space-between | space-around | stretch
    Initial: stretch
    Applies to: multi-line flex containers
    Inherited: no

    align-content values

    stretch flexbox-align-content-stretch
    flex-start flexbox-align-content-flex-start
    flex-end flexbox-align-content-flex-end
    center flexbox-align-content-center
    space-between flexbox-align-content-space-between
    space-around flexbox-align-content-space-around

    Example – align-content

    In the following code, CSS property align-content can be changed to the following values
    • stretch
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around
    <style>
    .fbox {
      display: flex;
      flex-wrap: wrap;
      align-content: stretch;
      width: 100px; background-color:gray; height: 120px;
    }
    .child {
      background-color:lightblue;
      border: 1px solid black; padding: 5px;
    }
    </style>
    
    <div class=fbox>
    <div class="child">div1</div>
    <div class="child">div2</div>
    <div class="child">div3</div>
    <div class="child">div4</div>
    <div class="child">div5</div>
    </div>
    align-content refresh done
    try it online

    Specification and Browser compatibility

    SpecificationStatusCategories
    Flexible Box Layout ModuleW3C Working DraftCSS3
    Desktop
    ChromeFirefoxIEEdgeSafariOpera
    Yes 29+ Yes 28+ Partial 11+ Yes 12+ Yes 9+ Yes 12.1+
    Mobile
    Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
    Yes 47+ Yes 44+ Yes 9.0-9.2+ Yes 11+ Yes 12.1+
    source: caniuse.com

    Suggested posts:

    1. CSS flex-shrink – shrink flex item if needed
    2. CSS justify-content – flexbox children aligment
    3. CSS flex-flow – flex direction and wrap shorthand
    4. Vim – show line numbers
    5. CSS flex-wrap
    6. CSS flex – shorthand for flex-grow, flex-shrink and flex-basis
    7. CSS order – flex items ordering
    8. CSS flex-grow – grow flex item if needed
    Share this article: share on facebook share on linkedin tweet this submit to reddit
    Posted in Tutorials | Tagged CSS, CSS properties, CSS3 flexbox, Tutorials
    • Browse content
    • Article Topics
    • Article archives
    • Contact Us
    Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | Company results | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries | InfoHeap Money

    Copyright © 2025 InfoHeap.

    Powered by WordPress