繁体   English   中英

安排弹性项目

[英]Arrange Flex-Items

假设我有一个 Flex-Box #X,我想在其中安排 4 个 Flex-Items #Y1... #Y4,如下所示: 定位 对于小于 60em 的 output 介质,弹性项目应该这样定位: 位置2

我知道我必须为 HTML 部分做什么,但是我必须为 css 部分做什么?

你是说像这样? 该示例适用于媒体查询和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>

①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM