相关疑难解决方法(0)

想象一下,我有以下标记

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

和风格

.item {
  width: 100%
}

并且由于某些原因我无法改变宽度我可以 .item 通过.container使用flexbox或任何其他方式设置父容器,在每行中排列2个项目吗？

这是一个常见的问题,但我无法弄清楚它为什么会发生.

我有一个父div,在div里面我有3个div,宽度设置为33%(确切地说,不是33.3%!)和display: inline-block.

在Chrome中它运行良好,但在Mozilla和Opera中它没有(我还没有在IE中测试它).我认为问题可能出在算法浏览器用于从百分比计算像素大小的算法中.但是当我检查DOM指标时,我发现父亲的宽度是864px而孩子的宽度是285px(这是正确的:864*.33 = 285.12).但为什么它不适合父母呢？285*3 = 855,比父母的宽度小9px!

哦,是的,所有div的填充,边距和边框设置为0,DOM指标确认.

我正在使用 flexbox 和新gap函数在项目之间添加一些空间。我试图每行有 4 个项目，因此将项目宽度设置为25%这样......

.container {
  display: flex;
  max-width: 800px;
  width: 100%;
  background: gold;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  width: 25%;
  background: teal;
}

<div class="container">

  <div class="item">
    Item 1
  </div>
  
  <div class="item">
    Item 2
  </div>
  
  <div class="item">
    Item 3
  </div>
  
  <div class="item">
    Item 4
  </div>
  
  <div class="item">
    Item 5
  </div>
  
  <div class="item">
    Item 6
  </div>
  
</div>

但这给了我每行 3 个项目，我认为这是因为它gap在计算宽度时考虑了该值。

我该如何解决这个问题？

我试图在标准CSS中实现一个简单的事情.

假设我有一个有3列和3列的网格系统box-sizing: border-box.

这意味着我将适合3个盒子,并且边距会缩小尺寸以适应最多3个盒子.

但是当我尝试用FLEXBOX做到这一点时,这真是一种痛苦!

因此,如果我有div,flex: 1 1 33.33%; margin: 10px;我希望每行有3个盒子......但是如果我使用的话flex-wrap: wrap,那将不会缩小到适合3个盒子.

这是一个例子..这个想法是第二行连续有3个盒子,第四个盒子在最后一行.

谢谢

https://jsfiddle.net/mariohmol/pbkzj984/14/

.horizontal-layout {
  display: flex;
  flex-direction: row;
  width: 400px;
}

header>span {
  /* flex: 1 1 100%; */
  /* flex: 1 0 100%; */
  flex: 1 1 33.33%;
  margin: 10px;
}

header>.button {
  background-color: grey;
}

header>.app-name {
  background-color: orange;
}

header#with-border-padding {
  flex-wrap: wrap;
}

header#with-border-padding>span {
  flex: 1 1 33.33%;
  box-sizing: border-box;
  /* this is not useful at …

我的HTML代码中有这个结构:

<div style="display:flex">
    <div class="div_first">1</div>
    <div class="div_second">2</div>
    <div class="div_third">3</div>
    <div class="div_next_line">
      <div class="div_first">4</div>
      <div class="div_second">5</div>
      <div class="div_third">6</div>
    </div>
</div>

第二行中是否有4 5 6与1 2 3相同的列,如下所示:

1    2    3
4    5    6

HTML代码的结构无法更改.

我有一个div，并使用flex在中心对齐了12个项目。

但是我只想在一行中有4个项目，所以我想要3行4列。

用flex可以吗？而且你知道怎么做吗？

我正在尝试这样做：https : //jsfiddle.net/18mzsqcx/1/，但是它不起作用。

还是最好只创建一个div，例如.col4宽度等于25％并留有一些边距，然后将此类.col4放在每个项目中？

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.container {
  float: left;
  width: 100%;
  background-color: red;
}

.content {
  width: 94%;
  margin: 0px auto;
  background-color: yellow;
  padding: 30px;
}

.categories {
  display: flex;
  justify-content: space-between;
  background-color: blue;
}

.categories_item a {
  color: green;
}

.categories_item {
  flex-grow: 1;
}

<div class="container">
  <div class="div content">


    <div class="categories">
      <div class="categories_item">
        <a href="" …

我正在使用 Flexbox 测试几种不同的布局，但遇到以下问题。

我有一个设置了弹性项目的图片库flex:0 0 25%;，我想为它们添加 1px 边距，因为 1% 太大了。所以我想知道在这种情况下我应该做什么。

我附上下面的例子。

#foto-container {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 0 0 25%;
  min-height: 200px;
  background-color: red;
}


/*---------How I can add 1px to photo?-----------------*/

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="foto-container">
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
  <div class="foto foto4">4</div>
  <div class="foto foto5">5</div>
  <div class="foto foto6">6</div>
  <div class="foto foto7">7</div>
  <div class="foto foto8">8</div>
  <div class="foto foto9">9</div>
  <div class="foto foto1">1</div> …

我有一个小问题。我总是使用浮动来排列我的元素。我正在转向 Flexbox，我做了一些例子，一切都很好，但我正在做一个事情进展不顺利的例子。

我有一个容器，里面有 1 到 12 种产品，每行 4 种。我只使用四个元素做了一个简单的示例，它正在工作，但现在我正在制作一个包含五个元素的示例，第一行看起来不错，但第五个元素占用产品容器的 100%，但我希望它只占用 25 %，第六个占25%，依此类推。

这就是我所看到的：

这是我的代码：

<div class="container-2">
      <div class="item-2">
        ...
      </div>
      <div class="item-2 p2-2">
        ...
      </div>
      <div class="item-2">
        ...
      </div>
      <div class="item-2 pp2">
        ...
      </div>
      <div class="item-2 pp2">
        ...
      </div>
</div>

这是我的CSS：

.container-2 {
  max-width: 1200px;
  margin: 0 auto;

  padding: 20px 15px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.item-2 {
  padding: 0 15px;
  flex: 1 0 25%;
  margin-bottom: 40px;
}