如何将元素与另一个与flex对齐的元素对齐？

-1

我有一个柔性容器内的两个元素的行，这些元素使用CSS属性-webkit-flex-flow: row wrap;和justify-content: space-around;居中。在这一行的上方，我想要一个与文本垂直对齐的行中最左边的div。如何将元素与另一个与flex对齐的元素对齐？

是否有可能仅使用CSS来完成此操作，并且要求元素保留其display: flex;属性？

这里是我的html：

<div class="flex-container"> 
    <div class="info-box"> 

    </div> 
    <div class="type-one"> 

    </div> 
    <div class="type-one"> 

    </div> 
</div>

这里是CSS：

.flex-container { 
    padding: 0; 
    margin: 0; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    justify-content: space-around; 
} 

.type-one{ 
    width: 45%; 
    height: 50px; 
    background: tomato; 

    text-align: left; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    justify-content: flex-start; 
} 
.info-box{ 
    width: 100%; 
    height: 10px; 
    background: tomato; 
    margin-bottom: 3px; 
}

Here是小提琴的例子。你可以看到最上面的一行是如何从左边开始的（因为它有flex-start对齐方式），但是我希望它从第二行最左边的元素开始的位置开始。这是可能的与给定的要求？

编辑：我意识到我可以在信息框中添加一个2.5％左右的空白或将其宽度设置为95％，但我更喜欢一种与第一种元素相关的解决方案，这样如果我改变宽度信息框会自动重新排列。

来源

2017-02-27 user3494047

这样吗？ https://jsfiddle.net/sqmcaqLv/3/ –

是的。我只是意识到我可以计算出剩余空间的百分比，并用它来设置宽度或边距。虽然我更喜欢一个没有硬编码的解决方案，因为如果我改变第二行元素的宽度，那么我需要手动更改信息框的边距。有没有相对于第二行而不是硬编码边距的东西？ – user3494047

您需要基于其他div的宽度（45％x2 + 5％的间距= 95％宽度）https://jsfiddle.net/sqmcaqLv/5/ – pol

要使它们在左边对齐，请设置父元素的左/右边距以匹配希望中间列开始的任何位置。将justify-content从space-around更改为space-between，以便中间列的左侧间距不会改变，并使用这些元素的宽度在它们之间创建空间。

.flex-container { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    
 
    padding: 0; 
 
    margin: 0; 
 
    width: 95%; 
 
    margin: auto; 
 
} 
 

 
.type-one{ 
 
    height: 50px; 
 
    background: tomato; 
 
    text-align: left; 
 
    width: 47.5%; 
 
} 
 

 
.type-two{ 
 
    width: 100%; 
 
    margin-top: 10px; 
 
    font-size: 15px; 
 
    text-align: center; 
 
    height: 20px; 
 
    background: tomato; 
 
} 
 

 
.info-box{ 
 
    width: 100%; 
 
    height: 10px; 
 
    background: tomato; 
 
    margin-bottom: 3px; 
 
}

<div class="flex-container"> 
 
    <div class="info-box"></div> 
 
    <div class="type-one"></div><div class="type-one"></div> 
 
    <div class="type-two"></div> 
 
</div>

来源

2017-02-27 20:17:19

如何将元素与另一个与flex对齐的元素对齐？

回答

相关问题