有没有更好的方法在水平轴上底部对齐 flex-box div?
Posted
技术标签:
【中文标题】有没有更好的方法在水平轴上底部对齐 flex-box div?【英文标题】:Is there a better approach to bottom align flex-box divs on a horizontal axis? 【发布时间】:2021-11-01 04:12:25 【问题描述】:currnet result
我正在尝试使用 flexbox 使图像底部对齐,但我当前的代码没有按预期工作。 我以为我可以在图像 div 上使用“align-self”来实现这种对齐,但结果还是一样。 底部对齐图像的最佳方法是什么? (想要的结果在底部)
html:
<picture>
<source srcset="https://storage.googleapis.com/img.triggermail.io/hammacher/xmas-tree-divider-1440.svg" media="(min-width: 1440px)">
<source srcset="https://storage.googleapis.com/img.triggermail.io/hammacher/xmas-tree-divider-1024.svg" media="(min-width: 1024px)">
<source srcset="https://storage.googleapis.com/img.triggermail.io/hammacher/xmas-tree-divider-768.svg" media="(min-width: 768px)">
<source srcset="https://storage.googleapis.com/img.triggermail.io/hammacher/xmas-tree-divider-425.svg">
<!--425px-->
<img class="hs-xmasTree-divider-special" src="https://storage.googleapis.com/img.triggermail.io/hammacher/xmas-tree-divider-1024.svg" >
</picture>
<!--Storage Guide Section-->
<h2>Storing</h2>
<p>
Putting away one of our trees is as simple as assembly.
</p>
<div class="storage-steps-outer">
<div class="storage-steps-inner">
<div>
<h4>Step 1</h4>
<p>
Fold trips along the axis of the branch two at a time.
</p>
</div>
<div class="storage-steps-img">
<img>
</div>
</div>
<div class="storage-steps-inner">
<div>
<h4>Step 2</h4>
<p>
Disconnect each pole section.
</p>
</div>
<div class="storage-steps-img">
<img>
</div>
</div>
<div class="storage-steps-inner">
<div>
<h4>Step 3</h4>
<p>
Nest each section and branches into one of our storage bags.
</p>
</div>
<div class="storage-steps-img">
<img>
</div>
</div>
</div>
CSS:
/*--- ---MOBILE STYLES--- ---*/
.hs-xmasTree-editorial
margin: 18px 0 0 0;
padding: 0;
.hs-xmasTree-editorial h1
font-size: 30px;
color: #008073;
.hs-xmasTree-editorial h2
font-size: 28px;
color: #008073;
.hs-xmasTree-editorial h3
font-size: 24px;
color: black;
.hs-xmasTree-editorial h4
font-size: 20px;
color: black;
.hs-xmasTree-editorial p
font-size: 18px;
.hs-xmasTree-editorial .hs-xmasTree-small-text
font-size: 14px;
.hs-xmasTree-editorial a:link
color: #1253ad;
text-decoration: none;
.hs-xmasTree-editorial a:visited
color: #1253ad;
.hs-xmasTree-editorial a:hover
color: #000;
text-decoration: underline;
.hs-xmasTree-editorial a:active
color: #1253ad;
/*SECTION DIVIDER*/
.hs-xmasTree-divider
width: 100%;
margin-top: 15px;
margin-bottom: 16px;
.hs-xmasTree-divider-special
width: 100%;
margin-top: 0px;
margin-bottom: 16px;
/*Storage Section*/
.storage-steps-outer
display: flex;
flex-direction: column;
.storage-steps-img
background-color: gray;
width: 100%;
height: 200px;
margin-bottom: 8px;
/*Tablet Styles*/
@media only screen and (min-width: 768px)
/*Desktop Styles*/
@media only screen and (min-width: 1024px)
/*Tree Width Section*/
/*Storing Section*/
.storage-steps-outer
display: flex;
flex-flow: row;
.storage-steps-inner
display: flex;
flex-direction: column;
padding: 8px;
flex: 1;
.storage-steps-img
align-self: flex-end;
查看我的代码笔:https://codepen.io/mrcrumer/pen/RwgRKor
Desired Result Layout
【问题讨论】:
这能回答你的问题吗? Align an element to bottom with flexbox 【参考方案1】:使用边距
.storage-steps-img
margin-top: auto;
Codepen Link
/*SECTION DIVIDER*/
.hs-xmasTree-divider
width: 100%;
margin-top: 15px;
margin-bottom: 16px;
.hs-xmasTree-divider-special
width: 100%;
margin-top: 0px;
margin-bottom: 16px;
/*Storage Section*/
.storage-steps-outer
display: flex;
flex-direction: column;
.storage-steps-img
background-color: gray;
width: 100%;
height: 200px;
margin-bottom: 8px;
/*Desktop Styles*/
@media only screen and (min-width: 1024px)
/*Tree Width Section*/
/*Storing Section*/
.storage-steps-outer
display: flex;
flex-flow: row;
.storage-steps-inner
display: flex;
flex-direction: column;
padding: 8px;
flex: 1;
border: 1px solid red;
.storage-steps-img
margin-top: auto;
<picture>
<source srcset="https://storage.googleapis.com/img.triggermail.io/hammacher/xmas-tree-divider-1440.svg" media="(min-width: 1440px)">
<source srcset="https://storage.googleapis.com/img.triggermail.io/hammacher/xmas-tree-divider-1024.svg" media="(min-width: 1024px)">
<source srcset="https://storage.googleapis.com/img.triggermail.io/hammacher/xmas-tree-divider-768.svg" media="(min-width: 768px)">
<source srcset="https://storage.googleapis.com/img.triggermail.io/hammacher/xmas-tree-divider-425.svg">
<!--425px-->
<img class="hs-xmasTree-divider-special" src="https://storage.googleapis.com/img.triggermail.io/hammacher/xmas-tree-divider-1024.svg" >
</picture>
<!--Storage Guide Section-->
<h2>Storing</h2>
<p>
Putting away one of our trees is as simple as assembly.
</p>
<div class="storage-steps-outer">
<div class="storage-steps-inner">
<div>
<h4>Step 1</h4>
<p>
Fold trips along the axis of the branch two at a time.
</p>
</div>
<div class="storage-steps-img">
<img>
</div>
</div>
<div class="storage-steps-inner">
<div>
<h4>Step 2</h4>
<p>
Disconnect each pole section.
</p>
</div>
<div class="storage-steps-img">
<img>
</div>
</div>
<div class="storage-steps-inner">
<div>
<h4>Step 3</h4>
<p>
Nest each section and branches into one of our storage bags.
</p>
</div>
<div class="storage-steps-img">
<img>
</div>
</div>
</div>
【讨论】:
以上是关于有没有更好的方法在水平轴上底部对齐 flex-box div?的主要内容,如果未能解决你的问题,请参考以下文章