Flexbox的定位是不工作

我有一個項目具有以下樣式的容器：Flexbox的定位是不工作

.container-ok { 
 
    display: flex; 
 
    flex: 0 1 auto; 
 
    flex-direction: column; 
 
    align-items: flex-end; 
 
} 
 
.container-error { 
 
    display: flex; 
 
    flex: 0 1 auto; 
 
    flex-direction: column; 
 
    justify-content: flex-end; 
 
} 
 
.item { 
 
    width: 3rem; 
 
    border: 1px black solid; 
 
}

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

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

我期待的是，在容器中的所有項目在一列中呈現，並在右側，但它不起作用。當我刪除flex-direction，它的工作原理，但我有例如3項，他們在一行（3列），而不是一列。如果我刪除justify-content並將其替換爲align-items，則可以使用。但是align-items是用於垂直對齊。

我在做什麼錯？

謝謝

來源

2016-11-09 andreas

'align-items'用於沿着橫軸對齊（垂直用於「行」方向）和'justify-content'用於沿着flex-axis對齊（水平用於'row'方向） - 對於'列'的方向，這是另一種方式...不明白你的問題 – kukkuz

「列方向是相反的」這是回答我的問題的觀點。謝謝。 – andreas

如果我理解你的權利，你想達到this結果

HTML

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

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

CSS

.container-ok { 
    display: flex; 
    flex: 0 1 auto; 
    justify-content: flex-end; 
} 

.container-error { 
    display: flex; 
    flex: 0 1 auto; 
    justify-content: flex-end; 
} 

.item { 
    width: 3rem; 
    border: 1px black solid; 
}

也有一個很好的guide了flexbox ，也許它會幫助你

來源

2016-11-09 10:27:50 Olga

對齊內容聲明的工作原理是因爲它定義了沿着主軸的對齊方式。反而證明內容不起作用，因爲它定義了當前行中沿着交叉軸佈局Flex項目的默認行爲。您可以將其視爲橫軸的垂直內容版本（垂直於主軸）。

來源

2016-11-09 14:07:03 CastenettoA

Flexbox的定位是不工作

回答

相關問題