问题描述
最后,我有一排这样的盒子:
See the code in action on Codepen。 StackOverflow无法正确显示它。
这是我使用的css:
@font-face {
font-family: "Heebo-Light";
src: url(Heebo-Light.ttf) format("truetype");
}
svg {
position: relative;
display: block;
overflow: visible;
pointer-events: none;
}
body {
background-color: #FDFDFD;
}
.box svg:nth-of-type(1) {
position: absolute;
z-index: 2;
left: 0;
top: 0;
min-width: 0;
}
.box svg:nth-of-type(2) {
position: absolute;
z-index: 1;
left: 0;
top: 0;
min-width: 0;
}
.subbox-container {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.main-container {
width: 100%;
height: 100vh;
gap: 20px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
align-content: center;
/*overflow: hidden;*/
/* flex-flow: row wrap;*/
min-width: 0;
}
.background-rectangle {
transform: translate(49.3315px,-24.31px);
left: 0;
top: 0;
margin-right: 0 !important;
min-width: 0;
}
.box-container {
position: relative;
transform: translate(-49.3315px);
top: 0;
min-width: 0;
}
* { min-width: 0; }
当框数大于8或调整浏览器大小时,页面将没有空间以固定宽度显示所有框。由于我想调整所有元素的大小以适合任何大小和宽度,因此我向所有元素添加了min-width: 0;
,但它没有任何改变。
我知道我们可以将flex-flow: row wrap;
设置为在一页上显示所有框,但是我想知道是否有flexbox解决方案来减小所有框的大小以在页面上一行显示它们?
我的意思是,如果所有盒子的宽度都减小一点,那么整个事情就可以在单行上看到……使用flexbox可以吗?
解决方法
似乎您正在向子元素添加一些行内宽度。尽管您已经为父级分配了min-width: 0
,但是由于您在子级元素(如.box
,.background-rectangle
,和svg
。为确保这些元素不会超出其父元素,请使用CSS属性max-width
。
.box,.background-rectangle,svg {
max-width: 100%;
}
https://codepen.io/emineminems/pen/MWyazdQ
,我不明白的是,这些代码属于您吗?为什么不能为每个框指定特定的宽度值?
您可以使用媒体查询,媒体查询随每个维度而有所不同。像这样:
@media screen and (max-width:550px) {
.box-container1{
width: xxxxxxxxxx ;
}
}
// Extra small devices (portrait phones,less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones,less than 768px)
@media (max-width: 767.98px) { ... }
// Medium devices (tablets,less than 992px)
@media (max-width: 991.98px) { ... }
// Large devices (desktops,less than 1200px)
@media (max-width: 1199.98px) { ... }