Using overflow-x: scroll does not work when flex layout jusify-content is set to flex-end

CSS:

.col {
  width: 100%;
  ...
}

.block-flex {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  ...
}

.scroll-dx {
  overflow-x: scroll;
  ...
}

HTML:

<div class="col block-flex scroll-dx"><div>

scrollable when set to flex-start

Flex flexbox css3

Jun.28,2021

change the direction of the spindle, do not use the alignment of the spindle

.col {
  width: 100%;
}

.block-flex {
  display: flex;
  flex-direction: row-reverse;
  /* justify-content: flex-end; */
  align-items: center;
  white-space: nowrap;
}

.scroll-dx {
  overflow-x: auto;
}

<div class="col block-flex scroll-dx">01<div>

this problem is very lame, flex layout does exist this problem, and people do not understand, set to center or flex-end is the existence of this problem. And there is not a unified treatment plan, but the writing method can be adjusted to achieve it according to the specific needs.

Previous: If fiddler grabs the package of nodejs's request

Next: Easywechat 4.0How to scan the code to pay. The document only finds the usage of the notification after the payment is successful, but does not have how to call the scan payment.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bdc110-30813.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bdc110-30813.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?