使用 Css flexbox 对齐项目答案

【问题标题】：Align Items using Css flexbox使用 Css flexbox 对齐项目
【发布时间】：2016-09-08 04:12:54
【问题描述】：

我想像这样对齐项目。

将 4 项放在 1 行中，3 项放在下一行，但我想居中对齐。

虽然我固定为 25%，但它不能正常工作。

请看here

.flex-container {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  width: 100%;
}
.quarter {
  width: 24.6%;
  padding: 20px;
  background-color: #b5d46e;
  border: 3px solid white;
  color: white;
  font-size: 1.5em;
  text-align: center;
}

<div class='flex-container'>
  <div class='quarter flex-item'>
    <h3>1</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>2</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>3</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>4</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>5</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>6</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>7</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>8</h3>
  </div>
</div>

【问题讨论】：

将 box-sizing:border-box 添加到类 .quarter

标签： html css flexbox

【解决方案1】：

将 4 个项目放在 1 行中，3 个项目放在下一行，但我想居中对齐。

不确定我们应该如何处理第 8 项，但是...

首先，我们使用box-sizing:border-box 在宽度计算中包含填充/边框，我们可以将宽度（或 flex 属性）设置为：

.quarter {
  flex: 0 1 25%;
}

..我们完成了。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
}
.quarter {
  flex: 0 1 25%;
  padding: 20px;
  background-color: #b5d46e;
  border: 3px solid white;
  color: white;
  font-size: 1.5em;
  text-align: center;
}

<div class='flex-container'>
  <div class='quarter flex-item'>
    <h3>1</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>2</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>3</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>4</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>5</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>6</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>7</h3>
  </div>
</div>

【讨论】：

我删除了我的答案，因为我虽然他想要 4/3/1 并且@Wowsk 的答案比我更好（对于那种方法）。太傻了：P

【解决方案2】：

我会将您想要的每组.quarter 元素包装在一行中，在它们自己的弹性框中。确保为每个 .quarter 赋予 flex:1; 属性而不是 width:25% 属性。

例如，这是您第一行的 HTML。引用所有代码的小提琴，包括放置flex:1; 属性的位置。

<div class='flex-container'>
  <div class='quarter flex-item'>
    <h3>1</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>2</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>3</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>4</h3>
  </div>

https://jsfiddle.net/ogho96cf/

【讨论】：