当前位置: 首页 > 知识库问答 >
问题:

证明-交叉轴上的内容-flex

袁志专
2023-03-14

在主轴上,证明内容作为空格之间空格周围看起来很直观。

对于以下元素,

<!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Sample document</title>
  <link rel="stylesheet" href="style.css">
  </head>
  <body>
     <div class = "container">
      <div class = "box box1">1</div>
      <div class = "box box2">2</div>
      <div class = "box box3">3</div>
      <div class = "box box4">4</div>
      <div class = "box box5">5</div>
      <div class = "box box6">6</div>
      <div class = "box box7">7</div>
      <div class = "box box8">8</div>
      <div class = "box box9">9</div>
      <div class = "box box10">10</div>
     </div>

  </body>
</html>

在横轴上设置样式,

.box{
    color: white;
    font-size: 100px;
    text-align: center;
    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0, 1);
}

.box1{ background: #1abc9c; }
.box2{ background: #3498db; }
.box3{ background: #9b59b6; }
.box4{ background: #34495e; }
.box5{ background: #f1c40f; }
.box6{ background: #e67e22; }
.box7{ background: #e74c3c; }
.box8{ background: #bdc3c7; }
.box9{ background: #2ecc71; }
.box10{ background: #16ae85; }


/* Property of parent container - start */
/* Justify-content works on main axis of the border*/
.container{
    display:flex;
    justify-content: space-between;
    flex-direction: column;
}
/* Property of parent container - start */

下面是两个空格之间的输出

在上述输出中,

周围的空间是什么

共有1个答案

史阳晖
2023-03-14

从…起https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

justify-content: space-between; /* Distribute items evenly
                               The first item is flush with the start,
                               the last is flush with the end */

justify-content: space-around;  /* Distribute items evenly
                               Items have a half-size space
                               on either end */

在第二个示例中,您没有为列设置高度,因为列与内容一样高,所以没有空间可填充,因此周围和之间的空间实际上不会占用任何额外空间

在第一个示例中,flex是行,因为容器的宽度为100%,每个项目的宽度加起来不等于该宽度,所以需要填充额外的空间

 类似资料:
  • 通常,您可以在排列弹性项目后观察容器中剩余的额外空间,如下所示。 使用属性justify-content ,您可以通过按预期分配额外空间来沿主轴对齐内容。 您还可以调整 flexitems 的对齐方式,以防它们溢出线条。 usage - justify-content: flex-start | flex-end | center | space-between | space-around| s

  • 交叉验证 那么什么时候才需要交叉验证呢?交叉验证用在数据不是很充足的时候。比如在我日常项目里面,对于普通适中问题,如果数据样本量小于一万条,我们就会采用交叉验证来训练优化选择模型。如果样本大于一万条的话,我们一般随机的把数据分成三份,一份为训练集(Training Set),一份为验证集(Validation Set),最后一份为测试集(Test Set)。用训练集来训练模型,用验证集来评估模型预

  • 问题内容: 我正在尝试进行交叉验证,并且遇到一个错误:“找到的输入变量样本数量不一致:[18,1]” 我在熊猫数据框(df)中使用不同的列作为要素,最后一列作为标签。这源自UC Irvine的机器学习存储库。导入我过去使用过的交叉验证程序包时,我收到了一个错误消息,说明它可能已贬值。我将运行决策树,SVM和K-NN。 我的代码是这样的: 任何帮助将是巨大的! 问题答案: 不推荐使用该模块。新模块已

  • 我有一个相对大的数据: 超过37万个观测数据,分类因变量有250个水平,10个自变量包括数值变量和分类变量。 下面是我的代码: 有人告诉我包'CV tools'或'cert'可以预形成k-folds CV,但我仍然不能成功地执行这些包或函数。

  • 我们欢迎各类开发者服务、Docker 平台、SaaS 自动化工具与 DaoCloud 对接,我们将为您在这个版块开设介绍页面,并在 DaoCloud 各类市场渠道帮助您宣传。 如希望提交内容,请与我们联系,或直接提 Pull Request。

  • 我正在尝试用Python实现k-fold交叉验证算法。我知道SKLearn提供了一个实现,但是...这是我现在的代码。 learner参数是来自SKlearn库的分类器,k是折叠数,examples是CountVectorizer(再次是SKlearn)产生的稀疏矩阵,它是单词包的表示。例如: 我假设在某个地方有一些逻辑错误,因为训练集上的分数是95%(正如预期的那样),而测试测试上的分数实际上是