安排弹性项目

Question

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

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

Answer 1

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