代码之家 › 专栏 › 技术社区 › Nishit Agrawal

Flexbox-将第三项与第二项对齐

flexbox css

Nishit Agrawal · 技术社区 · 2 年前

我有三件不同高度和宽度的弹性物品。

我希望第二和第三项与第一项相关。

我的第一个项目是图像,第二个是文本,第三个是另一个文本

我希望我的第二件物品位于弹性箱的中心,第三件物品位于第二件物品的开头。我还想让第二项增长并覆盖rem区域。

How I want my alignment

这就是我正在做的

.box {
display: flex;
justify-content: flex-start;

}

.flex-second-item {
align-self: center;
flex-grow: 1
}

2 回复 | 直到 2 年前

Ricardo Silva 2 年前

您只需要为它们使用不同的Flexbox

body {
  display: flex;
  gap: 10px;
  align-items: center;
}

.one {
  width: 100px;
  height: 100px;
  background: red;
}

.right-side {
  display: flex;
  gap: 10px;
}

.two {
  width: 75px;
  height: 75px;
  background: red;
 }
 
 .three {
  width: 50px;
  height: 50px;
  background: red;
 }

<body>
  <div class="one"></div>
  <div class="right-side">
    <div class="two"></div>
    <div class="three"></div>
  </div>
 </body>

希望有帮助。当做

Teehbow 2 年前

您可以将第二个和第三个项目包装在一个div中,并使用align items=flex start来显示它们。

因此,您可以尝试:

.first-box-and-div-which-contains-second-and-third-boxes {
display: flex;
align-items: center;
}

.second-and-third-boxes {
display: flex;
align-items: flex-start;
}

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

2 年前

alan · 有没有办法向flexbox图像添加链接?

2 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

3 年前

n1234 · Flexbox-图像和内容

7 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

7 年前

Adam Olsson · 在中心CSS中对齐单个列表项

7 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

7 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

7 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

7 年前