相关疑难解决方法(0)

我有一个流体宽度的容器DIV.

在这个我有4个DIV全部300px x 250px ...

<div id="container">
   <div class="box1"> </div>
   <div class="box2"> </div>
   <div class="box3"> </div>
   <div class="box4"> </div>
</div>

我想要发生的是箱子1向左浮动,箱子4向右浮动,箱子2和3在它们之间均匀间隔.我希望间距也是流畅的,因此随着浏览器变小,空间也变小.

我有一个关于flexbox布局的主要问题.我建立了一个装有图像的盒子的容器,我决定使用flexbox布局来证明内容的合理性,使它看起来像一个网格

她的代码是:

<div class="container">

    <div class="item"></div>
    <div class="item"></div>
    ...
    <div class="item"></div>

</div>

和CSS:

.container {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
}

.container .item { width: 130px; height: 180px; background: red; margin: 0 1% 24px; }

除了最后一行/行之外,一切看起来都很好 - 当它不包含与其他行相同数量的元素时,中心元素和它会破坏我的网格效果.

http://jsfiddle.net/puz219/7Hq2E/

如何将最后一行/行对齐到左侧？

我有一个<ul>flex-box和一堆<li>s里面的flex-items.

我试图让它<li>具有灵活的宽度,使用最小宽度和最大宽度保持两种尺寸.只要它们在同一条线上,它就能很好地工作.但是,当它们换<li>行时,新行上的s会尽可能多地使用空间.这意味着它们在第一行很小,而在第二行很小,只有少数几行.

有没有办法告诉flexbox在包装后保持项目的宽度,同时保持灵活的宽度？

包装演示:

我的代码看起来像这样:

<ul>
  <li>
    <figure>
      <img src="http://placekitten.com/g/250/250">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/100/100">
    </figure>
  </li>
  <!-- ... -->
</ul>

而CSS:

ul {
  display: flex;
  flex-wrap: wrap;
}

  li {
    min-width: 40px;
    max-width: 100px;
    flex: 1 0 0;
  }

这是一个关于codepen的实例,带有一些额外的注释,调整窗口大小以查看它的包装.

我的问题是我希望flexbox具有可变范围宽度,并且一切正常,但不是最后一行.我希望所有孩子都有相同的维度,即使行没有孩子(最后一行).

#products-list {
    position:relative;
    display: flex;
    flex-flow: row wrap;
    width:100%;
}

#products-list .product {
    min-width:150px;
    max-width:250px;
    margin:10px 10px 20px 10px;
    flex:1;
}

在JSFiddle示例中,我创建了一个动态情境.

我的flex div可以缩小到150px并且长到250px,但所有都必须具有相同的大小(显然我想要一个CSS解决方案,JS我知道的方式).

尽管我使用谷歌搜索,我发现很少有关如何实现多线柔性盒的例子.我从示例中得到的代码都没有用.我在flexbox中有三个元素,我希望第一个位于顶部,第二个和第三个位于底行.

<div class="flexbox">
  <div id="element1">element 1</div>
  <div id="element2">element 2</div>
  <div id="element3">element 3</div>
</div>

我尝试过使用这些属性:

.flexbox {
  width: 300px;
  display: box;
  display: -webkit-box;
  display: -moz-box;
  box-lines: multiple;
  flex-wrap: wrap;
}

#element1 {
  width: 100%;
}

并给它一个设定的宽度但它仍然不会换行,即使第一个元素的宽度为100%.我错过了某些供应商前缀或我的语法错了吗？

有可能像这样制作一个纯CSS解决方案:

1. 物品有一些min-width.
2. 它们应该动态增长以填充所有容器宽度,然后换行到新行
3. 列表中的所有项目应具有相同的宽度.

这就是它现在的样子:

这就是我希望它看起来像(我已经手动管理那些底部项目的宽度只是为了显示预期的结果):

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background: yellow;
  min-width: 100px;
  height: 20px;
  text-align: center;
  border: 1px solid red;
  flex-grow: 1;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

这是一个小提琴演示.

嘿我正在尝试为画廊创建一个响应式的盒子布局,看起来像这样http://webdesignerwall.com/demo/responsive-column-grid/

该示例的问题在于宽度是硬编码的,并且媒体查询是必需的.我有很多专栏可以解决这个问题.

我可以使用Flex girds获得相同的结果,但是最后一列比其他列大,如本CodePen所示:

http://codepen.io/anon/pen/zClcx

HTML

<div class="flex-container same-width same-height">
  <div class="flex-item">
    <div>g</div>
  </div>
  <div class="flex-item">
    <div>g</div>
  </div>
  <div class="flex-item">
    <div>g</div>
  </div>
  <div class="flex-item">
    <div>why am I longer than my friends?</div>
  </div>
</div>

CSS

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    max-width: 950px;
    flex-wrap: wrap;
    justify-content: space-between;
    background: grey;

  & > * {
    min-width: 300px;
    background: green;
    max-width: 404px;
    flex: 1 1 auto;
  }
  .flex-item > div {
    background: red;
  }
}

问题: 如何使最后一列与其他列的大小相同？

假设我有一个用户列表,每个用户都附加了一些号码.每个用户都列出如下:

<span><a href="/user/Niet">Niet</a> &rArr; 2</span>

它们的风格都是:

.userlist>span {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid currentColor;
}

这是一个实际的例子:

好吧,这看起来很好,用户列表可以长得很长,所以紧凑在这里很重要.我的问题是,右边缘是非常不一致的,所以我想知道是否有任何方法可以改善这一点.

当然,我的第一个想法是在跨度上设置固定宽度.但是,用户名宽度不是完全可预测的.你可以打电话iiiii给某人打电话WWWWW但是因为这不是monospace字体,你会得到"iiiii"和"WWWWW",那里的宽度非常明显不同.所以"最大宽度"基本上是最宽的允许字符,即W乘以最大用户名长度.我们试试吧......

EW.我不妨使用一个<ul>如果这是我将得到的结果.接下来的想法可能是让display:table宽度在列之间保持一致,同时仍然保持动态并且 - 假设大多数人都有合理的用户名(*咳嗽*......哦,嘿,这就是你如何逃避Markdown ......呵呵...... .) - 但它确实往往会留下很多空的空间.

所以我目前的想法是某种合理的对齐.这对文本很有效,对吧？但是,唉,text-align: justify确实在这种情况下完全错误,可能是因为要素之间没有空格.

我最后的尝试是使用flexbox,我已经在网站的新设计中使用了一些效果.让我们看看它display: flex; flex-wrap: wrap;在容器和flex: 1 0 auto;元素上的外观......

嗯,这看起来不太糟糕.不太糟糕

......嗯.很近.我真正喜欢的是最后一行元素不会被拉伸到最终.没关系,最后一行有三个或四个,但两个看起来有点傻,只有一个填满整个宽度,看起来很荒谬.

所以我想这整个小冒险归结为一个简单的问题:

我如何实现类似于对齐的行为,其中元素间隔使用容器的整个宽度,除了在它们应该使用它们的自然宽度的最后一行？

要完成这个小故事,感谢@ Michael_B的回答,这就是我如何实现解决方案:

.userlist:after {
    content: '';
    flex: 10 0 auto;
}

结果如下:

美丽.

我有一个简单的盒子网格,我想与Flexbox一起响应.

框的数量由用户生成,因此我需要动态工作.这是我所在的代码片段:

<div class="wrap">
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
</div>

CSS:

.wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

.thumb{
  width:150px;
  height:150px;
  background-color:black;
  margin-bottom:20px;
}

这是上面代码的样子:

这是我希望它看起来像:

如何使用flexbox实现这一目标？我想避免%margins并让flexbox在这里完成所有工作,因为它在响应式设置中非常好用.

所以我做了很多研究，但我似乎无法找到我需要的解决方案，我想知道是否有人遇到同样的问题。我附上了代码示例。

基本上，我如何将其放在justify-content: flex-start换行的下一行？（如果有道理的话）

然后该页面将响应任何大小的浏览器。

<head>
<style>
body{
    margin:0px;
    padding:0px;
}
ul{
    padding:0px;
    margin:0px;
    list-style-type:none;
}

.c
{
    position: relative;
    display: flex;
    height: 100px;
    width: 100px;
    background-color: #000;
}
.c_style
{
    position: relative;
    display: flex;
    justify-content:space-between;
    margin: 0px 40px;
    flex-wrap: wrap;
}
div{
    margin:0px;
}
</style>
</head>    
<body>
<div>
<ul class="c_style">
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li> …