左右对齐弹性项目
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了左右对齐弹性项目相关的知识，希望对你有一定的参考价值。
我在同一个包装器中有4个div，我需要前3个对齐左（文本），第4个对齐右（图像）。
期望的效果如下。
<one> <
<two> Four
<three> >
html基本上只是包装器中的4个div，而css只能在包装器上显示：flex。
我已经部分地通过在包装器上添加flex方向列来实现这一点，所以所有4然后垂直堆叠但我需要第4个如上所述对齐。
任何帮助将非常感激。
谢谢
答案
使用flexbox：
* {
box-sizing: border-box;
}
.container {
height: 500px;
border: 1px solid green;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.item {
flex: 1;
padding: .5rem;
border: 1px dashed lightblue;
}
.one, .two, .three {
flex-basis: 33.333333%;
}<div class="container">
<div class="item one">1</div>
<div class="item two">2</div>
<div class="item three">3</div>
<div class="item four">4</div>
</div>另一答案
.wrapper {
display: flex;
flex-direction: row;
}
<div class="wrapper">
<div>
<div>one</div>
<div>two</div>
<div>three</div>
</div>
<div>
<div>four</div>
</div>
</div>另一答案
您可以简单地将最后一个元素设为绝对位置：
.wrapper {
display: inline-block;
padding-right: 100px;
position: relative;
}
.wrapper> :last-child {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 80px;
background: red;
}<div class="wrapper">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</div>以上是关于左右对齐弹性项目的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Flexbox 使一个弹性项目居中对齐并右对齐另一个