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列等寬

回答

相關問題