相关疑难解决方法(0)

仅使用flexbox CSS的水平砌体布局

我正在尝试仅使用CSS和flexbox创建水平砌体布局.我遇到的问题是元素之间存在垂直间隙,没有使用align-left: stretch;是否可以缩小间隙？

.card-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
  align-items: flex-start;
}


.card {
  width: 25%;
  flex: 1 0 auto;
}

Run Code Online (Sandbox Code Playgroud)

完整的codepen在这里

css layout flexbox masonry

Jul*_*ian

2015 02-24

24
推荐指数

2
解决办法

4万
查看次数

SVG元素的水平有序装箱

试图找出最好的方法，将装箱后的已知宽度的svg图像打包/分布在水平行中，如果容器的宽度太紧，可以将它们堆叠在一起。

容器的高度应最佳地自动调整，并且重力应为垂直中心点。创建了一些图像来说明所需的解决方案。

有没有解决这个问题的JS库，也许是d3？感觉上像是一个装箱问题，但也许在顺序和重力方面增加了一些复杂性。对画布解决方案不感兴趣。

如果容器足够宽

太紧，堆叠一些元素

更紧密地堆叠所有

javascript svg bin-packing d3.js

ham*_*son

2016 08-31

18
推荐指数

2
解决办法

471
查看次数

如何使用 flexbox 进行砌体布局

我想通过 flexbox.Child 元素创建砌体布局，应该按以下顺序出现，并且孩子的高度和宽度相同。我正在使用延迟加载。

1 2
3 4
5 6

Run Code Online (Sandbox Code Playgroud)

html css flexbox

sas*_*oft

2017 01-10

5
推荐指数

1
解决办法

9171
查看次数

当屏幕较宽时,为什么两个p-tag不能彼此相邻？

当浏览器宽度超过1000px时,div.flex-container会发生变化,因此to-p-tags可能会彼此相邻.然而,他们仍然在彼此之上.

我可以做些什么来让他们在更宽的屏幕上在宽屏幕上彼此相邻？

(对不起,我在这里更改了问题.虽然我真的无法理解发生了什么.使用"flex-direction:column",p-tag总是在彼此之上.没有它,它们彼此相邻.)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style type="text/css">
      .flex-container {
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          max-width: 800px;
          min-height: 180px;
          border: red 2px solid;
      }
      @media (max-width: 1000px) {
          .flex-container {
              max-width: 400px;
          }
      }
      .flex-container p {
          flex: 1;
          -webkit-box-flex: 1;
          display: block;
          width: 300px;
          margin: 0px;
          margin-right: 20px;
          margin-bottom: 10px;
          border: red 2px solid;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <p>
        This page is for setting up the W+ bookmarklet and adding it
        to your …

Run Code Online (Sandbox Code Playgroud)

css css3 flexbox

Leo*_*Leo

2013 12-31

1
推荐指数

1
解决办法

2万
查看次数