Question

ISSUE： 当我为flex容器指定静态宽度时，flex功能将停止工作。

我的目标： 在父容器中具有静态宽度的功能性flex布局。

现在： 这种弹性布局使用＆＃34; 100％＆＃34;父容器宽度。但是＆＃34; flex＆＃34;当我指定静态宽度时停止工作。

含义... 只要当前100％宽度等于窗口大小，flex就会正常运行......因为它会调整到窗口的宽度。

更多信息：

此灵活代码将在仅允许HTML＆amp;的主题页面中使用。 JS / JQ。
此部分将位于＆＃34;中间＆＃34;模板/页面的一部分。
我没有使用CMS（即：Wordpress）
模板的CSS有＆＃34;页面＆＃34;等级为100％宽度...我无法改变的事情
柔性部分需要在页面中水平居中

的jsfiddle： 下面JSFiddle中的默认CSS使用＆＃34; 100％＆＃34;容器的宽度= Flex工作正常。我已经评论了CSS类参数（mainwrapper），它导致flex停止工作。

JSFiddle Link:的 JSFiddle

Answer 1

使用public function insert($table, $data) { $param = array( 'name' => $data['name'], 'pass' => $data['pass'], 'email' => $data['email'], 'mobile' => $data['mobile'], 'address' => $data['address'] ); $this->db->insert($table, $param); }您可以删除max-width:980px，因为我指定了最大宽度width:100%。

如果我错过了一些东西请检查小提琴代码

Working fiddle

980px

.mainwrapper {
  width: 100%;
  /* Here's the problem:*/
  /* Asigning a static width breaks flex */
  max-width: 980px;
  text-align: center;
}

.page {
  width: 100%;
  margin: 0 auto;
}

.mainwrapper {
  width: 100%;
  /* Here's the problem:*/
  /* Asigning a static width breaks flex */
  max-width: 980px;
  text-align: center;
}


/* Product Layout */

.section-holder {
  display: flex;
  flex-flow: row wrap;
}

.section-item {
  display: flex;
  flex-direction: column;
  padding: 2%;
  flex: 1 24%;
  background-color: #FFF;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
}

.section-image img {
  width: 100%;
}

.section-info {
  margin-top: auto;
  padding-top: 20px;
  text-align: center;
}

@media ( max-width: 768px) {
  .section-item {
    flex: 1 21%;
  }
  .section-holder .section-item {
    flex: 2 46%;
  }
}

@media ( max-width: 680px) {
  .section-item {
    flex: 1 46%;
  }
}

@media ( max-width: 480px) {
  .section-item {
    flex: 1 100%;
  }
  .section-holder .section-item {
    flex: 2 100%;
  }
}

Answer 2

我认为您只需要将display的{{1}}更改为page flex。如果我正确理解你的问题。

block

到

.page {
    width: 100%;
    margin: 0 auto;
}

使用静态宽度容器进行Flex

2 个答案: