如何使用 flex 单独翻转其中一个元素的显示顺序

Question

我正在学习CSS屏幕布局，我想用flex改变一个元素的显示顺序。我在网上找了一些教程，还是不知道怎么写，只能简单的改第二个

，把显示顺序从左改到右？

ul{
  display: flex;
  flex-direction:column;
  width: 300px;
}

<ul>
  <li>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores doloribus dolor ipsum odit beatae voluptates culpa. Doloremque veniam labore pariatur!</p>
  </li>
  <li>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores doloribus dolor ipsum odit beatae voluptates culpa. Doloremque veniam labore pariatur!</p>
  </li>
  <li>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores doloribus dolor ipsum odit beatae voluptates culpa. Doloremque veniam labore pariatur!</p>
  </li>
</ul>

Answer 1

如果您正在寻找类似的东西

.flexed {
  width: 400px;
  height: 400px;
  border: 1px solid #c3c3c3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 50px;
}

.flexed div {
  width: 50px;
  height: 50px;
}
.reversed{
flex-direction: row-reverse;
}

<div style="text-align:center"> <h4>Without riversed row</h4> </div>
<div  class="flexed" >
  <div style="background-color:red;">1</div>
  <div style="background-color:pink;">2</div>
  <div style="background-color:orange;">3</div>
  <div style="background-color:lightblue;">4</div>
</div>



<div style="text-align:center"> <h4>With riversed row</h4> </div>
<div class="flexed reversed" >
  <div style="background-color:red;">1</div>
  <div style="background-color:pink;">2</div>
  <div style="background-color:orange;">3</div>
  <div style="background-color:lightblue;">4</div>
</div>

<div style="text-align:center"> <h4>With 2 only riversed row</h4> </div>
<div class="flexed " >
  <div style="background-color:red;">1</div>
  <div class="flexed reversed">
  <div style="background-color:pink;">2</div>
  <div style="background-color:orange;">3</div>
  </div>
  <div style="background-color:lightblue;">4</div>
</div>

Answer 2

使用 <bdo> 元素可以轻松实现从右到左的实际字母。只需将文本包裹在 <bdo> 中并添加 dir 属性和 "rtl".

的值

<bdo dir='rtl'>Text to reverse</bdo>

文本已从拉丁文更改为英文，以清楚地展示颠倒的文本。

ul{
  display: flex;
  flex-direction:column;
  width: 300px;
}

<ul>
  <li>
    <p>Did you know that more frozen bananas are sold right here on this boardwalk than anywhere in the OC? You burn down the storage unit? Oh, most definitely. What a fun, sexy time for you.</p>
  </li>
  <li>
    <p><bdo dir='rtl'>Did you know that more frozen bananas are sold right here on this boardwalk than anywhere in the OC? You burn down the storage unit? Oh, most definitely. What a fun, sexy time for you.</bdo></p>
  </li>
  <li>
    <p>Did you know that more frozen bananas are sold right here on this boardwalk than anywhere in the OC? You burn down the storage unit? Oh, most definitely. What a fun, sexy time for you.</p>
  </li>
</ul>

如何使用 flex 单独翻转其中一个元素的显示顺序

How to flip the display order of one of the elements individually using flex

html

css

flexbox