对于弹性物品,可以将align-items替换为align-self.

如果您有一个包含justify-content:flex-end个项目的Flexbox容器,但是您希望第一个项目是justify-content: flex-start,那么如何做到这一点呢?

推荐答案

似乎没有justify-self个,但您可以获得类似的结果设置,适当的marginauto?例如,对于flex-direction: row(默认值),您应该设置margin-right: auto来将子项与左侧对齐.

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}
<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>

这一行为是defined by the Flexbox spec.

Css相关问答推荐

隐藏div后缺少div的InnerHTML

NextJs - Tailwind css类样式未应用于响应屏幕

Mat-Form-字段占用更多区域,导致其他控件远离它

设置项目的最大宽度和最大高度

如何引用 SCSS 中的现有类?

如何在不使用 sx props 的情况下从 Select 样式中定位 mui paper 组件?

CSS Select 器 $parent > $child Select 嵌套列表中的所有
  • 子元素
  • 如何使用 Sass to CSS 创建 H1 到 H6 标题并减小字体大小

    当您到达页面底部时,如何使页脚 div 将附加的 div 向上推

    flex 容器中的两个滚动块

    如何更改 CSS:JavaScript 中的根 colored颜色 变量

    CSS:将背景图像拉伸到屏幕的 100% 宽度和高度?

    如何在 Flexbox 中禁用等高列?

    Angular 动画的目的是什么?

    当子元素水平溢出时,为什么忽略父元素的右填充?

    如何更改 HTML 输入标签的字体和字体大小?

    标签的 CSS 宽度

    仅当将 Div 悬停在上方时才显示滚动条?

    行高百分比不起作用

    如何复制 iOS 上固定的后台附件