显示柔性对齐到左侧

Question

如何将<div class="Text">Some text</div>左对齐？

＆＃13;

＆＃13;

    .navigation {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        height: 80px;
        background: rgb(255,255,255);
    }
    ul {
        list-style:none;
        /*float:right;*/
    }
    li {
        display:inline-block;
    }
    a {
        padding: 10px;
        width: 80px;
        text-decoration: none;
        display: block;
        text-align: center;
    }
    a:hover{
        background:lightgreen;
    }

＆＃13;

<div class="navigation">
    <div class="Text">Some text</div> 
    <ul>
        <li><a>Contacts</a></li>
        <li><a>About</a></li>
        <li><a>FAQ</a></li>
        <li><a>Other</a></li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

.Text {
margin-right: auto;
} 

应该工作

Answer 2

使用此代码段

.Text {
    display: flex;
    justify-content: flex-start;
    flex-grow: 1;
}