InfoHeap
Tech tutorials, tips, tools and more
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 order – flex items ordering

    on Sep 4, 2016

    Flex items are, by default, displayed in the same order as they appear in the source document. The order property can be used to change this ordering. Items with lower order value are placed first (default value is 0).

    Syntax:

    .someflexcontainer {
      display: flex;
    }
    .flexitem {
      order: 1;
    }

    CSS property order

    CSS version: CSS 3
    Value: ineger
    Initial: 0
    Applies to: flex items and absolutely-positioned children of flex containers
    Inherited: no

    Example – order

    <style>
    .fbox {
      display: flex;
      width: 250px; background-color:gray;
    }
    .child {
      background-color:green;
      padding: 3px; margin: 3px;
    }
    </style>
    
    <div class=fbox>
    <div style="order:5;" class="child">div1</div>
    <div style="order:4;" class="child">div2</div>
    <div class="child">div3</div>
    <div class="child">div4</div>
    <div class="child">div5</div>
    </div>
    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 align-items – flexbox items vertical alignment
    2. CSS align-self – override align-items for flex-item
    3. CSS flex-shrink – shrink flex item if needed
    4. CSS flex-direction – flexbox container ordering and orientation
    5. CSS flex-grow – grow flex item if needed
    6. CSS flex – shorthand for flex-grow, flex-shrink and flex-basis
    7. CSS flex-wrap
    8. CSS flex-flow – flex direction and wrap shorthand
    Share this article: share on facebook share on linkedin tweet this submit to reddit
    Posted in Tutorials | Tagged CSS, CSS properties, CSS3 flexbox, Tutorials

    Follow InfoHeap

    facebook
    twitter
    googleplus
    • Browse site
    • Article Topics
    • Article archives
    • Recent Articles
    • Contact Us
    • Omoney
    Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | 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

    Copyright © 2023 InfoHeap.

    Powered by WordPress