css 如何在手机上拉伸flexbox

kmpatx3s 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(159)

我试着让4个盒子以两种方式出现
1.在PC/大显示器上有所有4个盒子，大小相等，每个盒子占页面的25%
1.在较小的显示器上（一旦框开始相互重叠），将框显示在一列中，每个框扩展以填充屏幕的宽度。

<div class="flex-container">
<p id="box" style="text-align: center;"><strong><a >Box 1</a></strong></p>

<p id="box" style="text-align: center;"><strong><a >Box 2</a></strong></p>

<p id="box" style="text-align: center;"><strong><a >Box 3 </a></strong></p>

<p id="box" style="text-align: center;"><strong><a >Box 4 </a></strong></p>
</div>

.flex-container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
   align-items: stretch;
}
@media screen and (max-width: 600px){
   .flex-container{
      flex-direction: column;
   }
}

  #box{
    border: 15px solid blue;
  padding: 15px; 
}

css

来源：https://stackoverflow.com/questions/76508628/how-to-stretch-flexbox-across-phone

2条答案

按热度按时间

j1dl9f461#

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }

  .box {
    border: 15px solid blue;
    padding: 15px;
  }

  @media screen and (max-width: 600px) {
    .flex-container {
      flex-direction: column;
    }
  }

<div class="flex-container">
  <p class="box" style="text-align: center;"><strong><a>Box 1</a></strong></p>
  <p class="box" style="text-align: center;"><strong><a>Box 2</a></strong></p>
  <p class="box" style="text-align: center;"><strong><a>Box 3</a></strong></p>
  <p class="box" style="text-align: center;"><strong><a>Box 4</a></strong></p>
</div>

在这段代码中，我用class ="box"替换了重复的id ="box"属性。然后，我在CSS代码中使用. box类选择器来定位这些元素。这可确保样式一致地应用于所有框。

赞(0）回复(0）举报 2023-06-25

uurv41yg2#

首先，在HTML文档中不能有多个元素具有相同的id。所以把所有的id（box）都改成class。
添加.box{width: 100%}或高于媒体查询的25%。它将使盒子共享相同的宽度在桌面。

/*Add this to make sizing easier*/
*{
  box-sizing: border-box;
}

.flex-container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
   align-items: stretch;
}
/* moved box's style here*/
.box{
  width: 100%;
  border: 15px solid blue;
  padding: 15px; 
}
@media screen and (max-width: 600px){
   .flex-container{
      flex-direction: column;
   }
}

<div class="flex-container">
<p class="box" style="text-align: center;"><strong><a >Box 1</a></strong></p>
<!-- changed id to class -->
<p class="box" style="text-align: center;"><strong><a >Box 2</a></strong></p>

<p class="box" style="text-align: center;"><strong><a >Box 3 </a></strong></p>

<p class="box" style="text-align: center;"><strong><a >Box 4 </a></strong></p>
</div>

赞(0）回复(0）举报 2023-06-25

我来回答

css 如何在手机上拉伸flexbox

2条答案

相关问题

热门标签

最新问答