Question

我使用flex来定位两个div：

我在这个容器里面有两个div，如果可能的话我想把它们分开：

xxxxxxxxxxx     xxxxxxxxxxx
x         x     x         x
x   45%   x 10% x  45%    x
x         x     x         x
xxxxxxxxxxx     xxxxxxxxxxx

然后如果没有足够的空间让它们显示如下：

xxxxxxxxxxx 
x         x  
x         x 
x         x 
xxxxxxxxxxx 

xxxxxxxxxxx 
x         x  
x         x 
x         x 
xxxxxxxxxxx

我试图这样做，但它似乎不起作用。

#city {
    margin-top: 2rem;
    border: 1px solid #ddd;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    padding: 8px 15px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border-radius: 0.4rem;
}

<div id="city">
   <div style="flex-grow: 45;">xx</div>
   <div style="flex-grow: 10;"></div>
   <div style="flex-grow: 45;">yy</div>
</div>

有人能指出我可能做错了吗？

Answer 1

除了GCyrillus＆＃39;评论，我还建议使用支持其他旧浏览器的语法：

  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

如何使用CSS显示：flex来定位比例宽度？

1 个答案: