代码示例效果如上图
默认元素排列: 从左到右
<h3>默认：从左到右</h3> <div style="border:4px solid #ccc;display:flex;"> <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;">1</div> <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;">2</div> <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;">3</div> </div>
设置元素从右到左
1. 从右到左 float:right
<h3>1. 从右到左 float:right</h3> <div style="border:4px solid #ccc;"> <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;float:right;">1</div> <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;float:right;">2</div> <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;float:right;">3</div> </div>
使用float布局在实际场景中需要手动清理,否则会影响布局
2.1 从右到左 derection:rtl ，设置 css
<h3>2.1 从右到左 derection:rtl</h3> <div style="border:4px solid #ccc;direction: rtl;display:flex;"> <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;direction:ltr;">1</div> <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;">2</div> <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;">3</div> </div>
2.2 从右到左 dir="rtl" 设置元素属性 (推荐)
<h3>2.2 从右到左 dir="rtl"</h3> <div style="border:4px solid #ccc;display:flex;" dir="rtl"> <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;direction:ltr;">1</div> <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;">2</div> <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;">3</div> </div>
官方资料 - MDN：
https://developer.mozilla.org/en-US/docs/Web/CSS/float
https://developer.mozilla.org/en-US/docs/Web/CSS/direction
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir
