- Flexbox Tutorial
- Flexbox - Home
- Flexbox - Overview
- Flexbox - Flex Containers
- Flexbox - Flex-Direction
- Flexbox - Flex-Wrap
- Flexbox - Justifying Contents
- Flexbox - Align Items
- Flexbox - Align Content
- Flexbox - Flex-Order
- Flexbox - Flexibility
- Flexbox - Align Self
- Flexbox Useful Resources
- Flexbox - Quick Guide
- Flexbox - Useful Resources
- Flexbox - Discussion
Flexbox - Flex-Order
The flex-order property is used to define the order of the flexbox item.
The following example demonstrates the order property. Here we are creating six colored boxes with the labels one, two, three, four, five, six, arranged in the same order, and we are reordering them in the order one, two, five, six, three, four, using the flex-order property.
<!doctype html> <html lang = "en"> <style> .box{ font-size:35px; padding:15px; } .box1{background:green;} .box2{background:blue;} .box3{background:red; order:1} .box4{background:magenta; order:2} .box5{background:yellow;} .box6{background:pink;} .container{ display:inline-flex; border:3px solid black; flex-direction:rows; flex-wrap:wrap; } </style> <body> <div class = "container"> <div class = "box box1">One</div> <div class = "box box2">two</div> <div class = "box box3">three</div> <div class = "box box4">four</div> <div class = "box box5">five</div> <div class = "box box6">six</div> </div> </body> </html>
It will produce the following result −
- ve ordering
You can also assign –ve values to the order as shown below.
<!doctype html> <html lang = "en"> <style> .box{ font-size:35px; padding:15px; } .box1{background:green;} .box2{background:blue;} .box3{background:red; order:-1} .box4{background:magenta; order:-2} .box5{background:yellow;} .box6{background:pink;} .container{ display:inline-flex; border:3px solid black; flex-direction:row; flex-wrap:wrap; } </style> <body> <div class = "container"> <div class = "box box1">One</div> <div class = "box box2">two</div> <div class = "box box3">three</div> <div class = "box box4">four</div> <div class = "box box5">five</div> <div class = "box box6">six</div> </div> </body> </html>
It will produce the following result −
Advertisements