Question

.page {
  width: 90% margin: auto;
}

.row-container {
  width: 100%;
  display: flex;
}

.item-container {
  flex: 1;
  padding: 16px;
}

.item-container-2x {
  flex: 2;
}

.item {
  background-color: #e7e8e9;
  height: 50px;
  border: 1px solid #dddddd;
}

<div class="page">
  <div class="row-container">
    <div class="item-container">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
  <div class="row-container">
    <div class="item-container item-container-2x">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
</div>

这里的问题是填充。它会导致第二行的网格错位。

我使用flex: 1;表示等宽网格项，flex: 2;旁边是flex: 1;表示第二行16px。我的理解是弹性数字加起来。我试图将它们添加到3，但在第二行中，两个网格项之间只有一个边距会影响间距。我不确定这种方法是否比为gird项定义变量宽度更好，但使用flex对我来说似乎很简单。

我认为还有一个问题是我使用flex: 1/2的固定填充，其宽度可变为import numpy as np import seaborn as sns import pandas as pd from scipy.io import loadmat from scipy.optimize import minimize %pylab inline def Sigmoid(z): return 1/(1 + np.exp(-z)) def CostFunction(theta, lambda_, X, y): m,n = X.shape theta = theta.reshape((n, 1)) y = y.reshape((m,1)) z = X.dot(theta) J = - (1/m) * ((y.T).dot(np.log(Sigmoid((z))) + ((1 - y).T).dot(np.log(1 - Sigmoid(z))) + (lambda_)/(2*m) *((theta[1:].T).dot(theta[1:])))) return(J[0]); def Gradient(theta, lambda_,X, y): m, n = X.shape theta = theta.reshape((n,1)) y = y.reshape((m,1)) grad = np.zeros((n,1)) z = X.dot(theta) grad[0] = (1/m) * (X[:,0].T).dot(Sigmoid(z) - y) grad[1:n] = (1/m) * (X[:, 1:n].T).dot(Sigmoid(z) - y) + (lambda_/m) * theta[1:n] return(grad) def ova(X, y, n_labels, lambda_): initial_theta = np.zeros((X.shape[1], 1)) #401x1 all_theta = np.zeros((n_labels, X.shape[1])) #10x401 for c in np.arange(1, n_labels+1): res = minimize(CostFunction, initial_theta, args=(lambda_, X, (y == c)*1), method='BFGS', jac= Gradient, options={'maxiter':150}) all_theta[c-1] = res.x return(all_theta) def predict1(all_theta, X): probs = Sigmoid(X.dot(all_theta.T)) return(np.argmax(probs, axis=1)+1) weights = loadmat('ex3weights.mat') weights.keys() mat = loadmat('ex3data1.mat') # load mat-file xdata = mat['X'] ydata = mat['y'] Theta1, Theta2 = weights['Theta1'], weights['Theta2'] print(Theta1.shape, Theta2.shape) y = pd.DataFrame(ydata) X = pd.DataFrame(xdata) m,n = X.shape X = X.as_matrix() y = y.as_matrix() X = np.insert(X, 0, 1, axis = 1) theta = ova(X, y, 10, 0.1)。我确实尝试了百分比保证金，但仍然有同样的问题。而且我很难理解需要使用填充和边距的组合，甚至是负边距。

感谢您的帮助。

Answer 1

在Flex项目上使用padding时，Flexbox有一种更复杂的计算剩余空间的方法，这使得使其工作变得更加棘手。

在这种情况下，为了继续使用 flex-grow 进行大小调整，在弹性项目的子级（margin）上使用item会更简单。它将在父项上为padding提供与非灵活子项相同的输出。

Stack snippet

＆＃13;

.page {
  width: 90%;
  margin: auto;
}

.row-container {
  width: 100%;
  display: flex;
}

.item-container {
  flex: 1;
}

.item-container-2x {
  flex: 2;
}

.item {
  background-color: #e7e8e9;
  height: 50px;
  border: 1px solid #dddddd;
  margin: 16px;                                     /*  moved from ".item-container" and changed to "margin"  */
}

＆＃13;

<div class="page">
  <div class="row-container">
    <div class="item-container">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
  <div class="row-container">
    <div class="item-container item-container-2x">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
</div>

＆＃13;

如果您需要或必须在弹性项目上使用padding，则需要补偿删除的项目填充（每侧16px），以及将其添加为跨越项目的初始 flex-basis 。

Stack snippet

＆＃13;

.page {
  width: 90%;
  margin: auto;
}

.row-container {
  width: 100%;
  display: flex;
}

.item-container {
  flex: 1;
  padding: 16px;
}

.item-container-2x {
  flex: 2 32px;                                       /*  changed  */
}

.item {
  background-color: #e7e8e9;
  height: 50px;
  border: 1px solid #dddddd;
}

＆＃13;

<div class="page">
  <div class="row-container">
    <div class="item-container">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
  <div class="row-container">
    <div class="item-container item-container-2x">
      <div class="item"></div>
    </div>
    <div class="item-container">
      <div class="item"></div>
    </div>
  </div>
</div>

＆＃13;

在我的另一个答案中，我制作了一个弹性框表版本，这可能会对您有所帮助。在此链接中查看＆＃34; Stack片段 - Flexbox＆＃34; 示例：

Layout a flex box similar to a table?

作为旁注，并且由于您提到尝试使用百分比值，这会给您一些更多问题，您可以在这里阅读更多信息：

Why doesn't percentage padding / margin work on flex items in Firefox?

以下是关于使用flex-grow调整项目大小的更多内容：

flex-grow not sizing flex items as expected

如何使用带有填充的flexbox在3x3网格上跨越两列？

1 个答案: