‘flex’ and ‘order’ properties are used in combination to control the layout of elements within a container. They are part of the Flexbox layout model, which provides a powerful way to arrange and align items in a container.
1. The Flexbox Model: An Overview
Flexbox (Flexible Box Layout) is a CSS layout model designed to provide a more efficient way to layout, align, and distribute space among items in a container, even when their size is unknown or dynamic. It is especially useful for creating responsive designs.
To use Flexbox, you need a flex container and flex items.
· Flex Container: This is the element that holds the items you want to layout using Flexbox. You turn an element into a flex container by applying display: flex; or display: inline-flex;.
· Flex Items: These are the children of the flex container. They will be arranged according to the Flexbox rules.
2. The order Property
The order property controls the order in which the flex items appear in the flex container. By default, all items have an order value of 0. You can assign positive or negative integers to change the order.
Syntax
order: <integer>;
flex-order.html
<!DOCTYPE html> <html> <head> <style> .title{ background-color: lightgray; color: black; font-size: 25px; margin: 10px; } .container { display: flex; border: 2px solid black; padding: 10px; margin-left: 10vw; margin-top: 30px; width: 80vw; justify-content: center } .item { background-color: deepskyblue; padding: 10px; margin: 10px; color: white; width: 5vw; text-align: center } .item1 { order : 3 } .item2 { order : 4 } .item3 { order : 5 } </style> </head> <body> <div class="container"> <div class="item item1">A</div> <div class="item item2">B</div> <div class="item item3">C</div> <div class="item">D</div> <div class="item">E</div> <div class="item">F</div> </div> </body> </html>
No comments:
Post a Comment