css 排列弹性物料

k2arahey 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(107)

假设我有一个Flex-Box #X，我想在其中安排4个Flex-Item #Y1... #Y4，如下所示：x1c 0d1x对于小于60 em的输出介质，flex-item应按如下方式定位：

我知道我必须为HTML部分做什么，但是我必须为CSS部分做什么呢？

css

来源：https://stackoverflow.com/questions/75300256/arrange-flex-items

1条答案

按热度按时间

hlswsv351#

你的意思是像这样？这个例子使用媒体查询和flex-direction: column-reverse;。

.flex {
  display: flex;
  background: gray;
  justify-content: space-between;
  gap:10px;
  flex-wrap: wrap;
  padding:10px;
  max-width: 900px;
}

.item {
  margin: 0 auto;
  width:100%;
  max-width:400px;
  background-color: lightgreen;
  height:100px;
}

@media only screen and (max-width: 800px) {
  .flex {
    flex-direction: column-reverse;   
  }  
}

<div class="flex">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
</div>

赞(0）回复(0）举报 2023-02-01

我来回答

css 排列弹性物料

1条答案

相关问题

热门标签

最新问答