Flexbox 6列等宽

我是Flexbox的新手，但认为我可以使用它制作包含6列的响应式导航菜单。我遇到的问题是，它会拉伸100％的屏幕，但在大多数情况下，按钮的宽度不相等。有没有什么办法可以使按钮的宽度相同，并且仍然可以根据屏幕响应？大小和字体大小Flexbox 6列等宽

参阅此代码：JS Fiddle

.cat-bg { 
    display: flex; 
} 
.showSingle { 
    flex-grow: 1; 
    max-width: 30%; 
    float: left; 
    cursor: pointer; 
    cursor: hand; 
    display: block; 
}

来源

2017-01-23 patlxix9

您可以使用简写：'flex：1;'或'flex：0 1 30％'，其中30％与您的'max-width：30％匹配;'如果float接管。 display：block如果float也存在于你的后备中，则block是无用的。 https://jsfiddle.net/v1vtz3o6/5/ https://jsfiddle.net/v1vtz3o6/4/ –

只需添加flex-basis: 0;到.showSingle

https://jsfiddle.net/3mgr14v4/

来源

2017-01-23 17:25:41

默认情况下将。 t，弯曲的物体将根据其内容来确定尺寸。您可以通过调整flex-basis属性来更改此设置。你的情况，你可以让所有列/按钮大小相同这样的：（而非flex-grow: 1）

.showSingle { 
    flex: 1; 
}

另外请注意，您应该删除float和display陈述，和一个两条cursor声明。所以，你的这些元素最终的CSS应该是：

.cat-bg { 
    display: flex; 
} 

.showSingle { 
    flex: 1; 
    max-width: 30%; 
    cursor: pointer; 
}

对于它的价值，在这种情况下，速记flex属性等同于以下内容：

flex-grow: 1; 
flex-shrink: 1; 
flex-basis: 0%;

来源

2017-01-23 17:25:52 coreyward

-1

我想我找到如何纠正它：

.cat-bg { 
max-width: 100%; 
    margin: 0 auto; 
    display: flex; 
} 
.showSingle { 
    flex-grow: 1; 
    flex-shrink: 1; 
    flex-basis: 0; 
    cursor: pointer; 
    cursor: hand; 
    display: block; 
}

来源

2017-01-23 17:30:30 patlxix9

使用本

.cat-bg { 
    display: flex; 
    padding:10px; 
    flex-wrap:wrap; 
} 
.showSingle { 
    flex-basis:100px; 
    cursor: pointer; 
    cursor: hand; 

}

来源

2017-01-23 17:32:05

Flexbox 6列等宽

回答

相关问题