使用flex在同级右边对齐按钮 [英] Align button to the right of sibling using flex
问题描述
我真的很难理解flex的工作原理，这是我的目的
I am really struggling to understand how flex works, my aim in this pen
https://codepen.io/Esperteyu/pen/WMExEj
用于将在iframe外部单击我"按钮与iframe的右侧限制对齐，但位于下一行"中.
is to align the "Click Me Outside of the IFrame" button to the right limit of the iframe but in the "next line".
我可以将其对齐，但是只是在我不将iframe容器居中时(如果这样).理想情况下，我希望iframe居中并且按钮在其右侧对齐.
I can align it to it but just when I don't center the iframe container, if that makes sense. And ideally I would like the iframe centered and the button aligned to its right.
html是:
<div class="container">
<div class="container-center ">
<div class="center ">
<iframe srcdoc="<html><body><h2 style='text-align:center'>This is the iframe</h2><input type='button' value='Click Me Inside the iframe' style='float: right;'></body></html>">
</iframe>
</div>
</div>
<div class="container-right">
<div class="right">
<div>
<input type="button" value="Click Me Outside of the iframe">
</div>
</div>
</div>
</div>
css是:
.container {
background:red;
}
.container-center {
display:flex;
justify-content: center;
flex-direction: row;
width:100%;
}
.container-right {
display:flex;
justify-content: flex-end;
flex-direction: row;
}
.center {
display: flex;
background: lightblue;
}
.center iframe{
width: 100%;
}
有帮助吗?
谢谢
推荐答案
要使container-center居于其父级居中，并且Flexbox没有自己的属性来实现此目的，因此您可以寻求帮助例如伪，以匹配right元素，同时将container设置为flex容器.
To have the container-center centered in its parent, and as Flexbox doesn't have a property of its own to accomplish that, you could to take some help of e.g. a pseudo, to match the right element, combined with making the container a flex container.
.container {
background:red;
display:flex;
justify-content: center;
}
.container-right,
.container::before {
content: '';
flex: 1;
}
使用flex: 1，伪和container-right将占据剩余的空间，然后将container-center推到中间，并且使用align-items在container-right上，您可以控制垂直对齐它的孩子们.
With the flex: 1, the pseudo and the container-right will take equal of the space left, and push the container-center to the middle, and with the align-items on the container-right you control the vertical alignment of its children.
如果您选中此Codepen ，则在伪代码上添加了边框/right元素，您会清楚看到发生了什么.
If you check this codepen, where I added a border on the pseudo/right element, you'll see what is going on more clear.
堆栈片段
.container {
background:red;
display:flex;
justify-content: center;
}
.container-right,
.container::before {
content: '';
flex: 1;
}
.container-center {
}
.container-right {
display:flex;
align-items: flex-end; /* align children vertically */
overflow: hidden;
}
.center {
display: flex;
background: lightblue;
}
.center iframe{
width: 100%;
}
<div class="container">
<div class="container-center ">
<div class="center ">
<iframe srcdoc="<html><body><h2 style='text-align:center'>This is the iframe</h2><input type='button' value='Click Me Inside the iframe' style='float: right;'></body></html>">
</iframe>
</div>
</div>
<div class="container-right">
<div class="right">
<div>
<input type="button" value="Click Me Outside of the iframe">
</div>
</div>
</div>
</div>
根据评论进行了更新.
如果您是说 frame 外部的按钮应该右对齐，那么您需要一个额外的包装器来完成该操作.
If you mean that the button outside the frame should right align on a row of its own, you need an extra wrapper to accomplish that.
堆栈片段
.container {
background:red;
display:flex;
justify-content: center;
}
.container-right {
display:flex;
justify-content: flex-end;
}
.center {
display: flex;
background: lightblue;
}
.center iframe{
width: 100%;
}
<div class="container">
<div class="wrapper">
<div class="container-center ">
<div class="center ">
<iframe srcdoc="<html><body><h2 style='text-align:center'>This is the iframe</h2><input type='button' value='Click Me Inside the iframe' style='float: right;'></body></html>">
</iframe>
</div>
</div>
<div class="container-right">
<div class="right">
<div>
<input type="button" value="Click Me Outside of the iframe">
</div>
</div>
</div>
</div>
</div>
请注意，最后一个示例的代码可以简化为: https://codepen.io/anon/pen/ddzNgy
As a note, the last sample's code could be simplified, to this: https://codepen.io/anon/pen/ddzNgy
这篇关于使用flex在同级右边对齐按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
