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的定位是不工作

回答

相关问题