Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

html - 将 flex 元素放在 flex 盒容器中的另一个 flex 元素之下

In lại Tác giả: Walker 123 更新时间：2023-11-28 19:22:21 28 4
mua khóa gpt4 Nike

在这种情况下，我希望将 2.5 放置在 2 下方 - 但 flexbox 容器强制将其放置在同一行，而不是将其放置在 div 下方那已经是那个特定的顺序了。

我如何使用 flexbox - 将包含 2.5 的 div 放在包含 2 的 div 下 - 给定此 html.

我试图在 ie 中使用网格来完成此操作，但无法做到这一点，因为 ie 中不完全支持网格。这就是为什么我想看看我是否只能为 ie 执行此操作。

代码笔:https://codepen.io/anon/pen/ewqmXw 

.flex-container {
    hiển thị: linh hoạt;
}

.item-1 {
    order:1;
    background-color: rgba(200,520,266,.75);
    border-color: #b4b4b4;
    width: 50px;
}

.item-2 {
    order:2;
    background-color: rgba(145,223,0,.75);
    border-color: transparent;
    width: 50px;
}

.item-3 {
    order:3;
    background-color: rgba(145,520,0,.75);
    width: 50px;
}

.item-4 {
    order:4;
    background-color: rgba(0,0,0,.25);
    border-color: transparent;
    width: 50px;

}

.item2half {
    order:2;
    background-color: rgb(20,100,255);
    border-color: transparent;
    width: 50px;
}

  
1

  
2

  
2.5

  
3

  
4

câu trả lời hay nhất

我是这样理解你的要求的:

  • 元素 2.5 必须在元素 2 的下方
  • 不能用Grid，只能用flexbox
  • 不能修改 HTML

这是一种解决方案:

  • 您的 flex 元素的长度为 50 像素。
  • 每行需要 4 个。
  • 因此，不要以像素为单位定义元素宽度，而是将容器设置为 width: 200px，将元素设置为 width: 25%(flex-basis : 25%)
  • 现在你可以包装元素了。将容器设置为 wrap.
  • 创建一个伪元素作为第六项。
  • 此项将是透明的，并占据第 1 项下方的空间。
  • sử dụng order 属性确保元素 2.5 排在最后。

.flex-container {
  hiển thị: linh hoạt;
  flex-wrap: bọc;
  chiều rộng: 200px;
}

.item-1 {
  độ uốn: 0 0 25%;
  order: 1;
  background-color: rgba(200, 520, 266, 0.75);
}

.item-2 {
  độ uốn: 0 0 25%;
  order: 2;
  background-color: rgba(145, 223, 0, 0.75);
}

.item-3 {
  độ uốn: 0 0 25%;
  order: 3;
  background-color: rgba(145, 520, 0, 0.75);
}

.item-4 {
  độ uốn: 0 0 25%;
  order: 4;
  background-color: rgba(0, 0, 0, 0.25);
}

.flex-container::after {
  độ uốn: 0 0 25%;
  order: 5;
  background-color: transparent;
  nội dung: "";
}

.item2half {
  độ uốn: 0 0 25%;
  order: 6;
  màu nền: màu nước;
}

  
1

  
2

  
3

  
2.5

  
4

关于html - 将 flex 元素放在 flex 盒容器中的另一个 flex 元素之下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57055789/

28 4 0
Đề xuất bài viết: python - 如何转换 MixPanel 中的时间属性？
Đề xuất bài viết: iphone - 试图弄清楚这是否是内存泄漏 : Xcode
Đề xuất bài viết: javascript - 在 javascript 上连接 href 字符串
Đề xuất bài viết: python - numpy.datetime64 : how to get weekday of numpy datetime64 and check if it's between time1 and time2
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress