0

I am really struggling to understand how flex works, my aim in this pen

https://codepen.io/Esperteyu/pen/WMExEj

is to align the "Click Me Outside of the IFrame" button to the right limit of the iframe but in the "next line".

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.

The html is:

<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>

The css is:

.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%;
}

Any help?

Thanks

mitomed
  • 2,006
  • 2
  • 29
  • 58

1 Answers1

0

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;
}

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.

If you check this codepen, where I added a border on the pseudo/right element, you'll see what is going on more clear.

Updated codepen

Stack snippet

.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>

Updated based on a comment.

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.

Updated codepen

Stack snippet

.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>

As a note, the last sample's code could be simplified, to this: https://codepen.io/anon/pen/ddzNgy

Asons
  • 84,923
  • 12
  • 110
  • 165