Menu
I was interested swapping the order of my first flex child with the second. The problem I have is that I could potentially be dealing with a dozen or more divs. Is there a way I can assign the order of one flex child without having to assigning the order property to each one? Otherwise the first div gets pushed to the bottom.
.container {
display: flex;
flex-direction: column;
}
.child:first-of-type {
order: 2;
}<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>
398
Use of the order property has exactly the same implications for accessibility as changing the direction with flex-direction . Using order changes the order in which items are painted, and the order in which they appear visually.
Flex Start positions element at the start of the page. Flex End sets the element to the end of the page. Space Around arranges the items evenly but with spaces between them. The spaces will be equal among all the elements inside a flex-box container, but not outside them.
Only direct children of flex containers are flex items. In your example, "childOfChildClass" would only be a flex item if "childClass" was a flex container.
I was interested swapping the order of my first flex child with the second.
Give the second order: -1
.container {
display: flex;
flex-direction: column;
}
.child:nth-child(2) {
order: -1;
}<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>Is there a way I can assign the order of one flex child without having to assigning the order property to each one
No, if you want to move one between two other, you can't do that with just 1 rule, you need 2
.container {
display: flex;
flex-direction: column;
}
.child:nth-child(n+8) {
order: 2;
}
.child:nth-child(5) {
order: 1;
}<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>Change all of them to order 2, and only the second to order 1:
.container {
display: flex;
flex-direction: column;
}
.child:nth-child(2) {
order: 1;
}
.child {
order: 2;
}<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
