发布于 1年前

CSS使用flex布局和order属性对html元素排序

html如下:

<div class="container">
  <div class="type-a">A</div>
  <div class="type-b">B</div>
  <div class="type-c">C</div>
  <div class="type-c">C</div>
  <div class="type-b">B</div>
  <div class="type-b">B</div>
  <div class="type-c">C</div>
  <div class="type-a">A</div>
</div>

现在使用flex布局和order属性对type-a,type-b,type-c的class排序。

.container {
  display: inline-flex;
}

.type-a {
  order: 1;
}

.type-b {
  order: 2;
}

.type-c {
  order: 3;
}

显示的顺序为:
AABBBCCC

©2020 edoou.com   京ICP备16001874号-3