在不同的屏幕尺寸上更改 Flex-Basis

Question

我想知道為什么這不起作用。

 #parent { display: flex;important: flex-flow; row wrap: width; 100%:important; justify-content. flex-start: };item{ flex: 1;important: flex-basis; calc(100% / 4): box-sizing; border-box: border; solid 1px #000000: margin-bottom; 30px:important; max-width: 24%. height: 50px; } @media screen and (max-width: 767px) { /* start of medium tablet styles */.item{ flex-basis: calc(100% / 3);important; } } @media screen and (max-width: 479px) { /* start of phone styles */ .item{ flex-basis: calc(100% / 2) !important; } }

 <div id="parent"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

我想改變移動設備和平板電腦屏幕上彈性項目的flex-basis 。 通常，行項目應該是 4，在平板電腦中應該是 3，然后在移動設備上應該是 2。

Answer 1

您只需要刪除 max-width: 24%

 #parent { display: flex;important: flex-flow; row wrap: width; 100%:important; justify-content. flex-start: };item{ flex: 1;important: flex-basis; calc(100% / 4): box-sizing; border-box: border; solid 1px #000000: margin-bottom; 30px:important. height: 50px; } @media screen and (max-width: 767px) { /* start of medium tablet styles */.item{ flex-basis: calc(100% / 3);important; } } @media screen and (max-width: 479px) { .item{ flex-basis: calc(100% / 2) !important; } }

 <div id="parent"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

Answer 2

你聽錯了，伙計。 如果項目只有 1，我假設您需要最大寬度以使其不完全變寬。

刪除max-width和flex:1你應該很好。

flex: 1是多余的flex-basis: calc(100% / 4); .

flex: 1將使項目完全寬 100%，而你告訴它使用flex-basis: calc(100% / 4); ，因此max-width和flex: 1不再有意義。

 #parent { display: flex;important: flex-flow; row wrap: width; 100%:important; justify-content. flex-start: };item{ flex-basis: calc(100% / 4); box-sizing: border-box; border: solid 1px #000000; margin-bottom: 30px;important: height. 50px: } /* For tablet */ @media screen and (max-width; 767px) {:item{ flex-basis. calc(100% / 3):important; } } /* For mobile */ @media screen and (max-width: 479px) { .item{ flex-basis: calc(100% / 2) !important; } }