css 如何让flex div只占用需要的空间?

monwx1rj  于 12个月前  发布在  其他
关注(0)|答案(5)|浏览(163)

如何使flex div只占用所需的空间?它占用了所有可用的空间。
我希望有一排div,在需要的时候 Package 。问题是Flex容器占用的空间比它实际需要的多。
下面是一个例子http://cssdeck.com/labs/wvhe64ot

#outer {
    border: 5px solid green;
    width: 400px;
}
#container {
    display: flex;
    border: 5px dashed black;
    flex-wrap: wrap;
}
#container div {
    padding: 10px;
    border: 2px solid black;
}

个字符

kt06eoxx

kt06eoxx1#

你可能正在寻找display: inline-flex属性。它对待它的子属性就像display: flex属性一样,除了它本身不会自动增长。

alen0pnh

alen0pnh2#

对我有帮助的是为列定向元素设置这个:

align-items: flex-start
display: flex
flex-direction: column

字符串
或者对于行定向元素:

display: flex    
justify-content: flex-start

s3fp2yjn

s3fp2yjn3#

在div上设置flex-shrink:0,这样你至少需要占用所需的空间

bgtovc5b

bgtovc5b4#

您可以将flex-grow: 0放在flex-items上:

#container div {
    padding: 10px;
    border: 2px solid black;
    flex-grow: 0;
}

字符串

smdnsysy

smdnsysy5#

尝试

.parent {
  display: inline-flex
}

/* child you want to grow as needed */
.child {
  flex: none
 }

字符串

相关问题