css: Flexbox - order property

In this example below you will see how to do a css: Flexbox - order property with some HTML / CSS and Javascript

5.4. Display Order: the ‘order’ property (5. Ordering and orientation)

Thumbnail
This awesome code was written by goerk, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright goerk ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>css: Flexbox - order property</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      .flexboxContainer {
  display: -webkit-flex;
  display: flex;
  background: #a7a9aa;
  /*height: 30rem;*/
}

.flex-flow-row-nowrap {
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
}

.order1 {
  order:1;
}

.order2 {
  order:2;
}

.order3 {
  order:3;
}

.order-1 {
  order: -1;
}

.flexboxItem {
  width: 20rem;
  background-color: #b94a48;
  color: #fff;
  border: 1px dashed #333;
  padding: 1rem;
}

html {
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
  padding: 2rem;
  max-width: 130rem;
}

.explain {
	background: #efefef;
	padding: 2rem;
}

.copy {
  color: #b94a48;
  font-weight: bold;
  font-size: 1.8rem;
}

.self {
  color: #428bca;
}     
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="copy">
  <p>Specification texts are taken from the W3C specification 
    <a href="http://www.w3.org/TR/css3-flexbox/">W3C CSS Flexible Box Layout Module</a><br><span class="self">Own comments and notes in blue color.</span></p>
</div>

<div class="explain">
  <h1>Flexbox: order</h1>
  <p>
    Flex items are, by default, displayed and laid out in the same order as they appear in the source document. The ‘order’ property can be used to change this ordering.
  </p>
  <ul>
    <li><strong>possible values:</strong> integer</li>
    <li><strong>standard value: </strong> 0</li>
    <li><strong>applies to: </strong> flex items</li>
  </ul>
  <p>
    The ‘order’ property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups.</p>
  <p>A flex container will lay out its content starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document. This also affects the painting order [CSS21], exactly as if the elements were reordered in the document.</p>
  <p>
    Unless otherwise specified by a future specification, this property has no effect on elements that are not flex items.
  </p>
  <p class="self">
    // Good for SEO optimizing e.g. sidebar should be displayed before the content.<br>
    // In the source code the content can come before the sidebar and gets an higher order value than the sidebar.<br>
    // So the display is correct and the SEO ordering is correct too
  </p>
</div>
    
<h2>Demos</h2>
<h3>order 3-2-1</h3>
<div class="flexboxContainer">
  <div class="flexboxItem order3">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus temporibus?</div>
  <div class="flexboxItem order2">2. Lorem ipsum dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perspiciatis.</div>
  <div class="flexboxItem order1">3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo numquam animi officiis quos necessitatibus temporibus minima eaque suscipit sequi quaerat itaque</div>
</div>
    
<h3>order 2-3-1</h3>
<div class="flexboxContainer">
  <div class="flexboxItem order3">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus temporibus?</div>
  <div class="flexboxItem order1">2. Lorem ipsum dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perspiciatis.</div>
  <div class="flexboxItem order2">3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo numquam animi officiis quos necessitatibus temporibus minima eaque suscipit sequi quaerat itaque</div>
</div>
    
<h3>order: 1-3-2</h3>
<div class="flexboxContainer flex-flow-row-wrap-reverse">
  <div class="flexboxItem order1">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus temporibus?</div>
  <div class="flexboxItem order3">2. Lorem ipsum dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perspiciatis.</div>
  <div class="flexboxItem order2">3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo numquam animi officiis quos necessitatibus temporibus minima eaque suscipit sequi quaerat itaque</div>
</div>
  
<h3>order: 3-1-2</h3>
<p class="self">
  // move last element to front by adding order: -1 to the last flex item<br>
  // because standard value is 0, the item with order: -1 comes first
</p>  
<div class="flexboxContainer flex-flow-row-wrap-reverse">
  <div class="flexboxItem">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus temporibus?</div>
  <div class="flexboxItem">2. Lorem ipsum dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perspiciatis.</div>
  <div class="flexboxItem order-1">3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo numquam animi officiis quos necessitatibus temporibus minima eaque suscipit sequi quaerat itaque</div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/goerk/css-flexbox-order-property-mGxAJ */
.flexboxContainer {
  display: -webkit-flex;
  display: flex;
  background: #a7a9aa;
  /*height: 30rem;*/
}

.flex-flow-row-nowrap {
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
}

.order1 {
  order:1;
}

.order2 {
  order:2;
}

.order3 {
  order:3;
}

.order-1 {
  order: -1;
}

.flexboxItem {
  width: 20rem;
  background-color: #b94a48;
  color: #fff;
  border: 1px dashed #333;
  padding: 1rem;
}

html {
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
  padding: 2rem;
  max-width: 130rem;
}

.explain {
	background: #efefef;
	padding: 2rem;
}

.copy {
  color: #b94a48;
  font-weight: bold;
  font-size: 1.8rem;
}

.self {
  color: #428bca;
}     

Comments