Css Programming Tutorials, Guides & Best Practices

The order property controls the order of flex items, while the flex property is a shorthand for flex-grow, flex-shrink, and flex-basis.

.flex-container {
  display: flex;
}

.flex-item {
  background-color: lightgreen;
  padding: 20px;
}

.flex-item:first-child {
  order: 2;
}

.flex-item:nth-child(2) {
  flex: 2; /* Grow twice as much as other items */
}