在一行中使用flexbox，左對齊和右對齊元素

在過去，我將使用兩個容器，並使用clearfix向左和向右浮動。但是我認爲這種方法有點過時了，現在Flex的功能得到了很好的支持。在一行中使用flexbox，左對齊和右對齊元素

問題是我不知道如何使用flex佈局這一點。

下面是一些按鈕的截圖。輔助動作左對齊，另外兩個主要動作應該右對齊。

這裏是我的標記有：

<footer> 
    <button>Back</button> 
    <span class="primary-btns"> 
     <button>Cancel</button> 
     <button>Go</button> 
    </span> 
</footer>

有人能告訴我，我應該在這裏用什麼CSS柔性的方法呢？

來源

2016-05-10 chovy

你可以使用justify-content: space-between

footer { 
 
    display: flex; 
 
    justify-content: space-between; 
 
}

<footer> 
 
    <button>Back</button> 
 
    <span class="primary-btns"> 
 
    <button>Cancel</button> 
 
    <button>Go</button> 
 
    </span> 
 
</footer>

更新：您還可以用margin-left: autoDEMO

來源

2016-05-10 18:53:51

做到這一點沒有span你甚至都不需要嵌套容器在這種情況下，。

現代CSS技術（柔性和網格）使這個佈局簡單，只需要一個容器。

footer { 
 
    display: flex; 
 
} 
 

 
button:first-child { 
 
    margin-right: auto; 
 
} 
 

 
button { 
 
    margin: 5px; 
 
}

<footer> 
 
    <button>Back</button> 
 
    <button>Cancel</button> 
 
    <button>Go</button> 
 
</footer>

的Flex自動邊距消耗在指定的方向上的所有可用空間。

這也將工作：這裏

button:nth-child(2) { margin-left: auto }

所有關於汽車的利潤：Methods for Aligning Flex Items

來源

2016-05-10 19:04:42

在一行中使用flexbox，左對齊和右對齊元素

回答

相關問題