Flexbox 解决移动问题

Question

我创建了以下小提琴。

小提琴

    <span class="item__collection">

        <button class="item__button">1</button>

        <button class="item__button">2</button>

        <button class="item__button">3</button>

        <button class="item__button">4</button>

        <button class="item__button">5</button>

        <button class="item__button">6</button>

        <button class="item__button">7</button>

        <button class="item__button">8</button>

        <button class="item__button">9</button>

        <button class="item__button">10</button>

    </span>

<style>    

.item__collection {

  display: flex;

  flex-direction: column;

  margin: 0 auto;

  max-width: 1024px;

  -webkit-user-select: none;

  -ms-user-select: none;

  user-select: none;

}

/* 

  Device = Mobiles (Landscape), Tablets, Ipads, Laptops, Desktops

  Screen = from 481px and above

*/

@media (min-width: 481px) {

  .item__collection{

    flex-flow: row wrap;

  }

}

.item__button {

  height: 150px;

  flex: 100%;

  margin-top: 2px;

  margin-bottom: 2px;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 4em;

  border: 1px dotted gainsboro;

  cursor: pointer;

  background: transparent;

  border-radius: 3px;

}

.item__button:focus {

  border: none;

  outline: none;

}

.item__button:hover {

  border: none;

  background: gainsboro;

}

/*

  Device = Laptops, Desktops

  Screen = from 1025px to higher resolution desktops

*/

@media (min-width: 1025px) {

  .item__button {  

    flex: 33%;   

  }

}

/* 

  Device = Mobiles (Landscape), Tablets, Ipads 

  Screen = from 481px to 1024px

*/

@media (min-width: 481px) and (max-width: 1024px) {

  .item__button {

    flex: 49%;   

  }

}

</style>

我有一个限制，即在移动设备上网格将每行显示 1 个数字。在平板电脑设备上每行 2 个数字，在台式机和更大的设备上每行 3 个数字。如何定义“移动”取决于您，只要合理即可。

上面的小提琴在移动设备和平板电脑上可以正常工作 - 但在移动设备上，它每行显示 2 个数字。

Answer 1

您需要在头部添加元标记才能使移动媒体查询正常工作：<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">&nbsp; &nbsp; &nbsp; &nbsp; body{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .item__collection {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max-width: 1024px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-user-select: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -ms-user-select: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; user-select: none;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .item__button {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 150px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-top: 2px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: 2px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 4em;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px dotted gainsboro;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: transparent;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 3px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .item__button:focus {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; outline: none;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .item__button:hover {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: gainsboro;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @media screen and (min-width: 481px) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .item__collection{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-flow: row wrap;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @media screen and (min-width: 1025px) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .item__button {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex: 33%;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @media screen and (min-width: 768px) and (max-width: 1024px) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .item__button {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex: 49%;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @media screen and (max-width: 767px) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .item__button {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex: 100%;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">&nbsp; &nbsp; <title>Document</title></head><body><span class="item__collection">&nbsp; &nbsp; <button class="item__button">1</button>&nbsp; &nbsp; <button class="item__button">2</button>&nbsp; &nbsp; <button class="item__button">3</button>&nbsp; &nbsp; <button class="item__button">4</button>&nbsp; &nbsp; <button class="item__button">5</button>&nbsp; &nbsp; <button class="item__button">6</button>&nbsp; &nbsp; <button class="item__button">7</button>&nbsp; &nbsp; <button class="item__button">8</button>&nbsp; &nbsp; <button class="item__button">9</button>&nbsp; &nbsp; <button class="item__button">10</button></span>