我刚刚了解到,只有当有多行时,‘Align-Content’属性才起作用.因为这个属性是关于项目行之间的. 因此,如果只有一行,则此属性不能有影响.

* {
  box-sizing: border-box;
  font-size: 1.5rem;
}

html {
  background: #b3b3b3;
  padding: 5px;
}

body {
  background: #b3b3b3;
  padding: 5px;
  margin: 0;
}

.flex-container {
  background: white;
  padding: 10px;
  height: 1300px;
  border: 5px solid black;
  display: flex;
  flex-flow: wrap row;
  justify-content: center;
  align-items: center;
  align-content:flex-start
}

.item-1 {
  background: #ff7300;
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
}

.item-2 {
  background: #ff9640;
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
  width: 250px;
  font-size: 1.8rem;
}

.item-3 {
  background: #ff9640;
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
  height: 250px;
}

.item-4 {
  background: #f5c096;
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
  width: 300px;
  height: 300px;
}

.item-5 {
  background: #d3c0b1;
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
  width: 350px;
}

.item-6 {
  background: #d3c0b1;
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
  width: 350px;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="main.css">
        <title>Flexbox</title>
    </head>
    <body>
        <div class="flex-container">
            <div class="item-1">div</div>
            <div class="item-2">w=250px</div>
            <div class="item-3">h=250px</div>
            <div class="item-4">w/h=300px</div>
            <div class="item-5">w=350px</div>
            <div class="item-6">w=350px</div>
        </div>
    </body>
</html>

但在这种情况下,我申请了

  display: flex;
  flex-flow: wrap row;
  justify-content: center;
  align-items: center;
  align-content:flex-start

根据我所了解的,Align-Content应该不起作用,因为只有一行.因此,这些物品应该放在"弹性容器"的中心.

but it's placed on the top like below which it should not be enter image description here

你能解释一下这件事吗?

推荐答案

如果您使用flex-wrap: wrap,则flexbox中的align-content将生效.在您的例子中,它是flex-flow的属性,而您已经将其设置为wrap.这就是为什么它即使只有一行也会生效.

Css相关问答推荐

如何在Elm中更改视图时添加过渡?

R SHINY:FILL CONTAINER=TRUE时调整DT数据表高度,

为什么在RadixUi上应用Tailwincss和自定义css类不起作用?

在 Shiny 中动态更改 bslib 值框的类

当滚动量较小时,在滚动问题上动画粘性导航

使元素不水平滚动

Puppeteer - 无法在wine 店网站中拉出正确的 CSS Select 器

SASS 中的计算表达式

如何在 konvajs 中居中放置项目?

CSS 仅过渡背景 colored颜色

我怎样才能将我的按钮向上移动,因为文本是

如何在 TypeScript 文件中导入 CSS 模块?

同一元素的文本和背景之间的图层

CSS3 的 :root 伪类和 html 有什么区别?

您如何设置 Google Places Autocomplete API 的下拉菜单样式?

如何创建一个与 Bootstrap 3 配合得很好的粘性页脚

禁用输入的 CSS Select 器 type="submit"

如何在 Chrome 中模拟偏好 colored颜色 方案媒体查询?

ID 在整个页面中必须是唯一的吗?

CSS 表格 td 宽度 - 固定,不灵活