在不同的屏幕尺寸上更改 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; } }