css 如何更改Flex容器中元素的位置？[duplicate]

0yg35tkg 于 2023-02-14 发布在其他

关注(0)|答案(3)|浏览(148)

- 此问题在此处已有答案**：

How can I align one item right with flexbox?（5个答案）
11个月前关闭。
我想把元素3移到屏幕的右边。这是W3School的一个例子

.flex-container {
      display: flex;
      background-color: DodgerBlue;
    }
    
    .flex-container > div {
      background-color: #f1f1f1;
      margin: 10px;
      padding: 20px;
      font-size: 30px;
    }

<h1>Create a Flex Container</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

当我使用Flex显示屏时，我该如何做到这一点？

css

来源：https://stackoverflow.com/questions/71705856/how-to-change-the-position-of-an-element-in-flex-container

3条答案

按热度按时间

t40tm48m1#

这在某种程度上是一种黑客攻击，但它确实可以在JSFiddle上工作

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

.flex-container > div:nth-child(3) {
  margin-left:auto;
}

示例

赞(0）回复(0）举报 2023-02-14

kgqe7b3p2#

.flex-container {
      display: flex;
      background-color: DodgerBlue;
    }
    
    .flex-container > div {
      background-color: #f1f1f1;
      margin: 10px;
      padding: 20px;
      font-size: 30px;
    }

.flex-container > div:nth-child(3){
  margin-left:auto;
}

<h1>Create a Flex Container</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

赞(0）回复(0）举报 2023-02-14

wwwo4jvm3#

您可以使用flexbox的order属性作为示例，如下所示：

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

.flex-container > div:nth-child(3) {
  order: -1;
}

<h1>Create a Flex Container</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

赞(0）回复(0）举报 2023-02-14

我来回答

css 如何更改Flex容器中元素的位置？[duplicate]

3条答案

相关问题

热门标签

最新问答