css 垂直居中对齐最后一个项目- Flexbox [重复]

koaltpgm 于 2023-03-25 发布在其他

关注(0)|答案(5)|浏览(155)

此问题在此处已有答案：

Make a div span two rows in a grid（2个答案）
2天前关闭。
我有三个元素，前两个元素是列，而最后一个是行。尝试了几种不同的东西，但我无法得到我想要的结果

.container {
  display: flex;
  flex-direction: column;
}

.element {
  display: flex;
}

.icon {
  display: flex margin-left: auto;
  align-content: center;
}

<div className="container">
  <div className="element">Name Detail</div>
  <div className="element">Salary Detail</div>
  <div className="icon">(Here is a svg)</div>
</div>

我想要的结果：

css

来源：https://stackoverflow.com/questions/75812195/vertically-center-align-last-item-flexbox

5条答案

按热度按时间

2vuwiymt1#

试试这个代码。

.container {
  display: flex;
  align-items: center;
}

.details {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.element {
  flex: 1;
}

.icon {
  margin-left: auto;
  display: flex;
  align-items: center;
}

<div class="container">
  <div class="details">
    <div class="element">Name Detail</div>
    <div class="element">Salary Detail</div>
  </div>
  <div class="icon">
    (Here is a SVG)
  </div>
</div>

赞(0）回复(0）举报 2023-03-25

dkqlctbz2#

.container {
  display: flex;
  align-content: center;
}
.col {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
}
.element {
  display: flex;
  margin: 10px 10px 10px 0;
  border: 1px solid black;
}
.icon {
  display: flex;
  margin-left: auto;
  border: 1px solid black;
  flex: 1 0 auto;
  align-items: center;
  margin: 10px 0 10px 10px;
}

<div class="container">
  <div class="col">
    <div class="element">Name Detail</div>
    <div class="element">Salary Detail</div>
  </div>
  <div class="icon">(Here is a svg)</div>
</div>

最后一个元素动态间距和文本居中

赞(0）回复(0）举报 2023-03-25

guicsvcw3#

你应该把你的.elements放在它们自己的容器中。
超文本标记语言

<div class="container">

    <div class="col-container">    
      <div class="element">Name Detail</div>
      <div class="element">Salary Detail</div>
    </div>

    <div class="icon">(Here is a svg)</div>

  </div>

CSS

.container {
    display: flex;
    flex-direction: row;
    align-items:center;
    height:100px;
    width:600px;
  }

  .col-container {
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    height:100%;
  }

  .element{
    display: flex;
    background:cadetblue;
    height: 25px;
  }

赞(0）回复(0）举报 2023-03-25

b09cbbtk4#

通过观察你想要的结果，一种方法是这样的。

<div className="container">
  <div className="elementWrapper">
    <div className="element">Name Detail</div>
    <div className="element">Salary Detail</div>
  </div>
  <div className="icon">(Here is a svg)</div>
</div>

其中container实际上是flex-direction: row，而类elementWrapper将是flex-direction: column：

.container {
  display: flex;
}

.elementWrapper {
  display: flex;
  flex-direction: column;
}

赞(0）回复(0）举报 2023-03-25

ttygqcqt5#

下面的代码应该有帮助：

.container {
  display: flex;
  padding: 1rem;
  border: 1px solid black;
 }
 
 .element, .icon {
   border: 1px solid black;
 }
  
 .column {
   width: 100%;
 }

<div class="container">
  <div class="column">
    <div class="element">Name Detail</div>
    <div class="element">Salary Detail</div>
   </div>
  <div class="icon">(Here is a svg)</div>
</div>

希望能有所帮助！

赞(0）回复(0）举报 2023-03-25

我来回答

css 垂直居中对齐最后一个项目- Flexbox [重复]

5条答案

相关问题

热门标签

最新问答