css改变显⽰顺序_⼏种更改显⽰顺序CSS⽅法css改变显⽰顺序
在本教程中，我们将介绍⼏种⽤于重新排序HTML元素CSS⽅法。
⽬标
我们要构建的布局⾮常简单。 具体来说，在⼩屏幕（即<600px）上，它应如下所⽰：
在中等或以上的屏幕（即⼤于或等于600像素）上，我们希望它显⽰如下：
我们最⼤的挑战是到⼀种⽅法来反转按钮的顺序。
标记
我们将使⽤的标记很简单； 只是⼀个包含四个按钮的div元素：
<div class="boxes">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
</div>
rotate属性基本样式
在⼩屏幕上，所有按钮共享相同的样式：
.boxes button {
display: block;
width: 100%;
padding: 15px;
border: none;
margin-bottom: 5px;
box-sizing: border-box;
font-size: 1rem;
text-align: center;
text-decoration: none;
background: gold;
color: #000;
}
.boxes button:nth-of-type(even) {
background: #e6c200;
}
在较⼤的屏幕上，我们仅将width: 25%分配给按钮。 其余样式将由我们⽤来反转按钮顺序CSS⽅法确定。
@media screen and (min-width: 600px) {
/* we skip this property in flexbox and grid methods */
width: 25%;
/* more stuff here */
}
最后，我们将为按钮的focus状态添加⼀些样式：
.boxes button:focus {
outline: none;
color: #fff;
background: firebrick;
}
因此，如果我们使⽤键盘（“ Tab”键）浏览按钮，则每个焦点按钮将获得深红⾊作为背景⾊。
列排序⽅法
⾄此，我们准备研究当视⼝超过599px时反转按钮顺序的不同CSS⽅法。
⽅法1：浮动
⼀种快速的解决⽅案是将按钮浮动到右侧。 这是额外CSS：
@media screen and (min-width: 600px) {
.boxes button {
float: right;
width: 25%;
}
}
这是嵌⼊式Codepen演⽰：
⽅法2：定位
另⼀种解决⽅案是相对或绝对定位元素。
在第⼀个选项之后，我们将按钮浮动到左侧，为其指定position: relative ，然后使⽤left属性设置其位置。所需CSS如下所⽰：
@media screen and (min-width: 600px) {
.boxes button {
position: relative;
float: left;
width: 25%;
}
.boxes button:nth-of-type(1) {
left: 75%;
}
.boxes button:nth-of-type(2) {
left: 25%;
}
.boxes button:nth-of-type(3) {
left: -25%;
}
.boxes button:nth-of-type(4) {
left: -75%;
}
}
嵌⼊式Codepen演⽰：
在第⼆个选项之后，我们还可以为按钮指定position: absolute ，然后使⽤left属性更精确地设置其位置。
相应CSS规则：
@media screen and (min-width: 600px) {
.boxes {
position: relative;
}
.boxes button {
position: absolute;
width: 25%;
}
.boxes button:nth-of-type(1) {
left: 75%;
}
.boxes button:nth-of-type(2) {
left: 50%;
}
.boxes button:nth-of-type(3) {
left: 25%;
}
.boxes button:nth-of-type(4) {
left: 0;
}
}
Codepen演⽰：
⽅法＃3： direction属性
⼀种不太明显的⽅法是使⽤direction属性。 通常保留⽤于更改⽂本阅读⽅向的东西。 在我们的例⼦中，我们指定direction: rtl （从右到左）到包装器元素，⽴即反转布局。
注意 ：在此⽰例中，我们使元素的⾏为类似于表元素，以实现⽔平布局。
您可以在下⾯看到必要CSS样式：
@media screen and (min-width: 600px) {
.boxes {
display: table;
width: 100%;
direction: rtl;
}
.boxes button {
display: table-cell;
width: 25%;
}
}
值得⼀提的是，如果（出于某种原因）我们想要更改按钮的⽂本⽅向，则可以在样式表中包括以下“双向覆盖”规则：
.boxes button {
unicode-bidi: bidi-override;
}
Codepen演⽰：
⽅法＃4：转换
巧妙的解决⽅案是将按钮浮动到左侧，然后对它们及其⽗级应⽤transform: scaleX(-1) 。 通过设置负值，不会缩放转换后的元素。 实际上，它们是沿⽔平轴翻转的。
以下是必需CSS：
@media screen and (min-width: 600px) {
.boxes {
transform: scaleX(-1);
}
.boxes button {
float: left;
transform: scaleX(-1);
width: 25%;
}
}
嵌⼊式Codepen演⽰：
我们甚⾄可以使⽤变换的rotate功能来实现所需的顺序。 我们所需要做的就是添加transform: rotateY(180deg)对按钮及其⽗按钮添
加transform: rotateY(180deg) 。
这是此解决⽅案所需CSS：
@media screen and (min-width: 600px) {
.boxes {
transform: rotateY(180deg);
}
.boxes button {
float: left;
transform: rotateY(180deg);
width: 25%;
}
}
和Codepen演⽰：
⽅法5：Flexbox
Flexbox是更改列顺序的另⼀种⽅法。 在我们的⽰例中，我们可以利⽤两个不同的flexbox属性来创建所需的布局。
第⼀种⽅法是将按钮的⽗级设置为flex容器，然后向其添加flex-direction: row-reverse属性值。
以下是相应的样式：
@media screen and (min-width: 600px) {
.boxes {
display: flex;
flex-direction: row-reverse;
}
}
嵌⼊式Codepen演⽰如下所⽰：
第⼆个flexbox选项是将按钮的⽗级设置为flex容器，然后使⽤order属性确定按钮应以哪个顺序出现。
对应CSS：
@media screen and (min-width: 600px) {
.
boxes {
display: flex;
}
.boxes button:nth-of-type(1) {
order: 4;
}
.boxes button:nth-of-type(2) {
order: 3;
}
.boxes button:nth-of-type(3) {
order: 2;
}
.boxes button:nth-of-type(4) {
order: 1;
}
}
Codepen演⽰：
⽅法＃6：CSS⽹格布局
CSS⽹格布局是⼀种有前途的元素重排解决⽅案。 即使在撰写本⽂时，它对 ，也请尝试⼀下。 请记住，我们的⽰例仅适⽤于Chrome，默认情况下不⽀持此CSS功能，但是我们可以按照⼀些将其启⽤。
⽆需赘述，让我们描述两种实现所需顺序的⽅法。
第⼀个选项是将按钮的⽗级设置为grid容器，然后使⽤grid-column属性确定按钮应以哪个顺序出现。 另外，我们通过向它们添加grid-row: 1来确保所有按钮都属于同⼀⾏（第⼀⾏）。
请参阅以下相关样式：
@media screen and (min-width: 600px) {
.boxes {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.boxes button {
grid-row: 1;
}
.boxes button:nth-of-type(1) {
grid-column: 4;
}
.boxes button:nth-of-type(2) {
grid-column: 3;
}
.boxes button:nth-of-type(3) {
grid-column: 2;
}
.boxes button:nth-of-type(4) {
grid-column: 1;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。