CSS Flex-Direction: Row Needed if Default?

Question

We are utilizing React Typescript with CSS. Some people in our company use flex-direction: row, even though that's the CSS default.

Is there any reason to have flex-direction: row? Otherwise, will our team remove all code file lines using this? Just curious if there are any cases we need to be sure of. Are there any side effects or edge-case scenarios?

Answer 1

One scenario that may make a difference is CSS rule specificity. If an unspecific CSS selector is used to apply a non-default value to flex-direction, another developer could have forced it back to its original value with flex-direction: row.

Removing it could lead to a different layout:

.main-div {
  display: flex;
  gap: 1rem;
}

.main-div>* {
  flex-direction: column;
}

.row {
  flex-direction: row;
}

.container {
  display: flex;
  gap: 1rem;
}

.cube {
  width: 5rem;
  height: 4rem;
  border-radius: 0.25rem;
  background-color: cyan;
}

<div class="main-div">
  <span>With row</span>
  <div class="container row">
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
  </div>
  <span>Without row</span>
  <div class="container">
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
  </div>
</div>

These kind of semi-global rules that could cause trouble are usually used when some layout elements are made into columns very often in mobile websites and in media queries.