Flexbox - 响应右对齐div内的UL？

Question

我正试图在div中正确对齐UL。目标是拥有一个响应式导航栏，其中div的大小的变化将导致其中的UL在相反的方向上移动，以便不会脱离视野。

但是，如果我从右到左缩小区域，我最终会得到以下结果：

理想情况下应该保持这样：

我的css：

.navbar {
float: left;
width: 20%;
height: 2000px;
font: 600 1.25em/1.38 'Josefin Slab';
background-color: rgb(246, 84, 84);
}

.navbar .text {
float: left;
min-height: 39px;
font-size: 1em;
color: rgb(255, 255, 255);
}

.navbar .text-1{
margin-top: 50%;
}

.navbar .text {
clear: both;
width: 31.9157778085%;
flex:1;
margin-left:47%;
}

.navbar .navwrapper{
display:flex;

/*set direction every browser*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;

flex-wrap:wrap;
}

.navbar .text:hover{
text-shadow: 2px 5px 5px rgba(0, 0, 0, .5);
}

@import url(http://fonts.googleapis.com/css?family=Josefin+Slab:600);

HTML：

<div className="navbar clearfix">
            <ul className="navwrapper">
                <Link to="/" id="Home" className="text text-1">Home</Link>
                <Link to="/Training" id="Training" className="text text-2">Training</Link>
                <Link to="/Contributions" id="Contribute" className="text text-3">Contribute</Link>
                <Link to="/Info" id="Info" className="text text-4">Info</Link>
                <Link to="/About" id="About" className="text text-5">About</Link>
            </ul>
        </div>

Answer 1

在 .navbar 父级和justify-content: flex-end上添加.navbar { display: flex; width: 50%; height: 2000px; font: 600 1.25em/1.38 'Josefin Slab'; background-color: rgb(246, 84, 84); justify-content: flex-end; } .navbar .navwrapper { display: flex; flex-direction: column; flex-wrap: wrap; margin-right: 20px; margin-top: 50%; /* UL Reset */ list-style: none; } .navbar .navwrapper a { text-decoration: none; } .navbar .text { font-size: 1em; color: white; } .navbar .text:hover{ text-shadow: 2px 5px 5px rgba(0, 0, 0, .5); }应该正确对齐您的包装div。

这是一个HTML / CSS示例：

<div class="navbar">
  <ul class="navwrapper">
    <li><a href="/" id="Home" class="text">Home</a></li>
    <li><a href="/Training" id="Training" class="text">Training</a></li>
    <li><a href="/Contributions" id="Contribute" class="text">Contribute</a></li>
    <li><a href="/Info" id="Info" class="text text-4">Info</a></li>
    <li><a href="/About" id="About" class="text text-5">About</a></li>
  </ul>
</div>

(=<<) :: (a -> Parser b) -> Parser a -> Parser b
f =<< p = P (\s -> let x = parse p s
                   in if isErrorResult x
                      then x
                      else let (Result i a) = x
                           in parse (f a) i)