相关疑难解决方法(0)

我有一个简单的flex-box布局,其容器如下:

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

现在我希望最后一行中的项目与另一行对齐.justify-content: space-between;应该使用,因为可以调整网格的宽度和高度.

目前它看起来像

在这里,我希望右下角的项目位于"中间列"中.实现这一目标的最简单方法是什么？这是一个显示此行为的小jsfiddle.

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

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

<div class="exposegrid">
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div> …

我有一个关于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/

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

我的问题是我希望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我知道的方式).

我有一个固定宽度的容器,其中几个可变宽度元素必须出现在一行中,必要时可以将其溢出到其他行中.

但是,每个元素的开头必须与它上面的元素对齐,所以在ASCII艺术中它看起来像是这样(比如,填充1):

    /----------------------------------\
    |                                  |
    | # One    # Two   # Three  # Four |
    | # Five   # Six                   |
    |                                  |
    \----------------------------------/

换一种说法:

• 每行的第一个元素必须左对齐
• 每行的最后一个元素(最后一行除外)必须是右对齐的
• 每个元素必须与其上方的元素左对齐

我试图使用flexbox而没有成功.

这是我到目前为止最好的,flex-wrap: wrap用于容器和flex-grow: 1元素.

问题是最后一行填充到边缘.

justify-content: flex-start; // this does nothing

如果我拿走flow-grow: 1那么元素不会平均分配.我也尝试摆弄last-of-type元素,但这还不够.

这是否可能flexbox,或者我是以错误的方式进行的？

嘿我正在尝试为画廊创建一个响应式的盒子布局,看起来像这样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;
  }
}

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

Flexbox是网页设计师所希望的最酷工具之一.不幸的是,有时我不应该立即明白我应该做什么.举例来说,这个插头.我希望扩展项目以填充行,而不是在最后一行中一直扩展.
我的CSS包含这些重要的东西:

.recipe-picker recipe {
    -webkit-flex: 0 1 8em;
    flex: 0 1 8em;

    height: 12em;
}

如果我将更0改为任何正数(对应于flex-grow属性),则最后一个项目行将以超级丑陋的方式拉伸.其余的项目表现相当不错,但最后一行应保持与其他项目相同的大小.
我该怎么做才能解决这个问题？