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

版权声明:著作权归作者所有。

相关推荐

CSS让绝对定位的元素居中的办法

水平居中,设置left:0,right:0, 垂直居中,设置top:0,bottom:0。margin设置为auto<!DOCTYPE html> <html lang="en"> <head> <title>SO question 2803532</title> <style type="text/css

Html对加载失败的图片使用默认图片替换

在img标签使用onerror监听图片的加载,如果出现错误:1、设置onerror=null,这是为了避免default.png也加载失败2、把图片的src属性设置为默认图片的url,加载默认图片替换。<img src="myimg.png" onError="this.onerror=null;this.src='default.png';&quo

解决IE11 Flex布局文本不换行的问题

在页面上使用了flex来布局,代码如下:CSS:.container{     display: flex;     flex-direction: column;     border: 1px solid red;     align-items: center;   }   .item {     border: 

Html5使用CSS修改输入框的placeholder颜色

这里需要使用伪元素的方式对input的placeholder设置样式,且不同的浏览器伪元素不一样。兼容多个浏览器的方法:::-webkit-input-placeholder { /* WebKit, Blink, Edge */     color:    

CSS3:Flex布局

Flex是一种弹性布局,要分为两部分理解Flex:作用于容器(flex-container)的属性作用于容器里项目(flex-item)的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。主