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
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
Related
I want to stack 2 divs on top of each other aligned left and make the last div align right.
They should all 3 be vertically centered.
This is the markup I have. This can't be changed.
<div class="wrapper">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
</div>
This is how i want it to be.
Is this possible using Flex and not changing the markup?
Here you go:
.box{
width:100px;
height:100px;
background-color:red;
margin:5px;
}
.box:nth-of-type(3){
align-self:end;
}
.con{
display:flex;
width:350px;
height:250px;
flex-wrap:wrap;
flex-direction:column;
align-items:center;
justify-content:center;
background-color:yellow;
}
<div class="con">
<div class="box">001</div>
<div class="box">002</div>
<div class="box">003</div>
</div>
If you can add wrapper divs to those three divs you could do it as following:
You can wrap your first two divs in another div and apply justify-content: space-between to the container.
To center them vertically, add display: flex; and flex-direction: column to the wrapper class and add justify-content: center
.container {
display: flex;
justify-content: space-between;
}
.box {
background-color: green;
height: 100px;
width: 100px;
margin: 10px;
}
.col {
display: flex;
flex-direction: column;
justify-content: center;
}
<div class="container">
<div class="col">
<div class="box">First</div>
<div class="box">Second</div>
</div>
<div class="col">
<div class="box">Third</div>
</div>
</div>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
I am busy with a very simple thing of CSS. Let´s say I have four squares and inside each another square. I want my layout to look something like this:
But it looks like this:
But I can't get it right. The four squares are grouped in one element and display is set to inline-block. I want to move the small boxes inside their parents and I think I should do it with "display: flex" and "justify-content: flex-end" for example as in the code below. My code in HTML and CSS look like this.
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: honeydew;
margin: 15px;
width: 100%;
}
.big {
height: 200px;
width: 200px;
display: flex;
}
.small {
height: 100px;
width: 100px;
}
.block {
display: inline-block;
}
#small-1 {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
#small-2 {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
#small-3 {
display: flex;
justify-content: flex-end;
align-items: flex-start;
}
#small-4 {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Boxes</title>
</head>
<body>
<div class="block" id="block">
<div class="big" style="background-color: grey">
<div class="small" id="small-1" style="background-color:orange"></div>
</div>
</div>
<div class="block" id="block">
<div class="big" style="background-color: black">
<div class="small" id="small-2" style="background-color: yellow"></div>
</div>
</div>
<div class="block" id="block">
<div class="big" style="background-color: blue">
<div class="small" id="small-3" style="background-color: green"></div>
</div>
</div>
<div class="block" id="block">
<div class="big" style="background-color: purple">
<div class="small" id="small-4" style="background-color: pink"></div>
</div>
</div>
</body>
</html>
Can anybody help me with this? It seems pretty obvious and basic, but somehow doesn't work.
Edits:
div.block:nth-child(1) > div:nth-child(1) {
align-items: start; // to vertically align to start
}
div.block:nth-child(4) > div:nth-child(1) {
justify-content: start;// to horizontally align to start
align-items: start; // to vertically align to start
}
div.block:nth-child(3) > div:nth-child(1) {
justify-content: start; // to horizontally align to start
}
body{
display:flex;
}
justify-content:
start: items are packed toward the start of the writing-mode direction.end: items are packed toward the end of the writing-mode direction.
align-items:
flex-start / start / self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules.
flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.
A Complete Guide to Flexbox
CodePen Demo
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: honeydew;
margin: 15px;
width: 100%;
display: flex;
}
.big {
height: 200px;
width: 200px;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.small {
height: 100px;
width: 100px;
}
.block {
display: inline-block;
}
div.block:nth-child(1) > div:nth-child(1) {
align-items: start;
}
div.block:nth-child(4) > div:nth-child(1) {
justify-content: start;
align-items: start;
}
div.block:nth-child(3) > div:nth-child(1) {
justify-content: start;
}
<!doctype html>
<html>
<body>
<div class="block" id="block">
<div class="big" style="background-color: grey">
<div class="small" id="small-1" style="background-color:orange"></div>
</div>
</div>
<div class="block" id="block">
<div class="big" style="background-color: black">
<div class="small" id="small-2" style="background-color: yellow"></div>
</div>
</div>
<div class="block" id="block">
<div class="big" style="background-color: blue">
<div class="small" id="small-3" style="background-color: green"></div>
</div>
</div>
<div class="block" id="block">
<div class="big" style="background-color: purple">
<div class="small" id="small-4" style="background-color: pink"></div>
</div>
</div>
</body>
</html>
justify-content and align-items should be placed on the container level, so the #small's don't have to be that props, but .big.
I create a pen as example:
https://codepen.io/alecell-the-lessful/pen/qBZeBEx
[EDIT]
I just realise that I don't answer your question, and maybe that link helps you: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
The point is that you should use item level selectors such as align-self and margin to reach the desired behavior.
As above I provide a pen to example: https://codepen.io/alecell-the-lessful/pen/zYqgYvd
.force-to-bottom {
background: grey;
align-self: flex-end;
width: 100%;
margin: 0;
text-align: center;
height:200px;
}
#story {
text-align: center;
display: flex;
flex-direction: column;
padding:0;
justify-content: space-between;
}
.row {
display: flex;
}
html, body, .row, .container {
height: 100%;
}
.container {
background: pink;
}
<div class="container fill-height">
<div class="row">
<div id="story" class="col-lg-12">
<h1 style="text-align:center;">Demo</h1>
<div class="row force-to-bottom text-center">
<p>It's supposed to stay at the bottom of this section n goes across the whole screen</p>
</div>
</div>
</div>
</div>
I have a single page with multiple containers. I'm trying to create a section like a footer at the bottom of one of those containers. That footer should stay at the bottom of that section, but not at the bottom of the entire page. I've tried to add a force-to-bottom div but that did not work. How should I achieve this? Many thanks!
<div id="containerOne" class="container fill-height">
<div class="row force-to-bottom text-center">
<p>this is the footer of that one div</p>
</div>
</div>
<div id="containerTwo" class="container fill-height">
</div>
You can use flexbox to achieve this easily.
Make the #story flex by giving it display: flex property along with flex-direction: column to align its children below each other vertically.
Next to the .force-to-bottom children simply give the property align-self: flex-end to float to the bottom of its respective containers.
html, body, .row, #story, .container {
height: 100%;
}
.row {
display: flex;
}
.container {
background: pink;
}
.force-to-bottom {
background: grey;
align-self: flex-end;
width: 100%;
height: 50px;
margin: 0;
justify-content: center;
align-items: center;
}
#story {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0;
}
<div id="payContainer" class="container fill-height">
<div class="row">
<div id="story" class="col-lg-12">
<h1 style="text-align:center;">Demo</h1>
<div class="row force-to-bottom text-center">
<p>It's supposed to stay at the bottom of this section n goes across the whole screen</p>
</div>
</div>
</div>
</div>
Update after OP updated code:
Like I mentioned, for the above updated HTML structure you have. You need to apply display: flex to the #story div instead(not the .container). Also add another property flex-direction: column to make its children elements align below each other. .force-to-bottom styles remain the same.
I used the styling from this thread to make a progress bar fill in the empty space in a div (only other item is a button).
The problem is now that align-items: center doesn't vertically center the progress bar. I tried using align-content: center on the child too, with no effect.
Here's the code in case you didn't open the link
.wrapper {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 5em;
background: #ccc;
}
.wrapper > .left
{
background: #fcc;
}
.wrapper > .right
{
background: #ccf;
flex: 1;
}
Markup:
<div class="wrapper">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
Can someone tell me what I'm doing wrong? Thanks in advance
This is how it looks:
I guess you can do the following to get it right:
There is a margin coming for the .progress element- first you can nullify it:
.wrapper > .left > .progress {
margin: 0;
}
Give 100% height for wrapper
I also removed height: 10vh for the container of wrapper to finish things up.
See revised fiddle here and snippet below:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.wrapper {
display: flex;
align-items: center;
width: 100%;
background: #ccc;
height: 100%;
}
.wrapper > .left {
background: #fcc;
flex: 1;
}
.wrapper > .right {
background: #ccf;
}
.wrapper > .left > .progress {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-s-6 col-s-offset-3" style="background:purple; position:relative; border-radius:10px;">
<div class="wrapper">
<div class="left">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width:35%">
</div>
</div>
</div>
<div class="right">
<button type="button" aside-menu-toggle="menu-1" class="btn btn-sm btn-default">Меню</button>
</div>
</div>
</div>
</div>
</div>
Let me know your feedback on this. Thanks!
A flex container will enable a flex context only to its direct children. Hence, your "progress-bar" div is out of reach. Likewise, your purple background bar is before flex container (wrapper), so don't expect it's content to be centered either. You can check this guide.
Check this code:
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-s-6 col-s-offset-3" style="background:purple; height:10vh; position:relative; border-radius:10px;">
<div class="wrapper">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</div>
</div>
</div>
Pen based on your code here
Try adding
align-items: center;
justify-content: center;
to your .wrapper class.
Here is a good article on FlexBox positioning:
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
I have the following HTML structure:
<div id="outer">
<div id="left">
<div id="leftContainer"><span>bla</span><span>bla</span><span>bla</span><span>bla</span></div>
</div>
<div id="right">
<div class="item"><span>item text 1</span></div>
<div class="item"><span>item text 2</span></div>
<div class="item"><span>item text 3</span></div>
<div class="item"><span>item text 4</span></div>
<div class="item"><span>item text 5</span></div>
<div class="item"><span>item text 6</span></div>
</div>
</div>
With the corresponding styles:
#left, #right {
display: inline-block;
}
.item {
display:inline-block;
padding: 0px 5px;
}
#right {
position: absolute;
/*right:0px;*/ /*this little thing causes my problems*/
text-align:right;
border-color: red;
}
I need the right div to be right aligned. For that I set right:0px; but then the right element overlap the left div. If right:0px; is not set, then the item elements will break on a new line (which is part of my requirements) but the right element will be, obviously, left aligned. See the fiddle, comment/uncomment right:0px; and play with the width of the result panel.
Is the a way of right aligning the right div without overlapping? Floating is currently not a solution.
I'm not entirely clear on how the right div is supposed to behave after the 'collision' point but flexbox does allow for the alignment you wanted without the overlap that seems to be problematical for you.
#outer {
position: relative;
display: flex;
justify-content: space-between;
}
#outer {
position: relative;
display: flex;
justify-content: space-between;
}
div {
border: 1px solid black;
}
#left div span {
margin: 0px 5px;
display: inline-block;
}
.item {
display: inline-block;
padding: 0px 5px;
}
#right {
text-align: right;
border-color: red;
}
<div id="outer">
<div id="left">
<div id="leftContainer">
<span>bla</span>
<span>bla</span>
<span>bla</span>
<span>bla</span>
</div>
</div>
<div id="right">
<div class="item"><span>item text 1</span>
</div>
<div class="item"><span>item text 2</span>
</div>
<div class="item"><span>item text 3</span>
</div>
<div class="item"><span>item text 4</span>
</div>
<div class="item"><span>item text 5</span>
</div>
<div class="item"><span>item text 6</span>
</div>
</div>
</div>
JSFiddle Demo
As i understand you need something like following.
Use display:table-cell will solve your issue:
#left, #right {
display: table-cell;
}
Check Fiddle Here.
Give width: 100%; to .right wills stick right div to right align.
Check Updated Fiddle Here.
Use the flexbox model display: flex for your #right element.
#outer {
overflow: hidden;
}
#left {
float: left;
min-width: 66%;
background-color: #69f;
}
#right {
min-width: 34%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: stretch;
}
.item {
display: inline-block;
}
See example here: http://jsbin.com/qalilu/3/edit. I've added a min-width constraint, which may be useful.
See browser support: http://caniuse.com/#search=flexbox
And a guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/