Question

我想对齐这样的项目。

将1个项目放入1行，将3个项目放入下一行，但我想对齐中心。

虽然我以25％的比例固定，但效果不正常。

请查看here

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我会将自己想要的每组.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/

Answer 2

将1个项目放入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>

使用Css flexbox对齐项目

2 个答案: