I am having an issue where I am trying to use flex to show divs left, center, and right. Although I run into an issue where the center column isn't in-line with the div above it. When I change the flex to flex: 1, it does put each column in line but leaves an empty space to the right of my furthest right div. Can someone offer some advice or tips on how to correct this? I have seen similar questions about flex, but nothing the specifically addressed this concern. I have provided some of the code I am using currently. Thank you in advance!
.container {
display: flex;
width: 100%;
justify-content: space-between;
}
.item {
flex: 1;
}
<body>
<div class="container">
<div class="item">Hello World</div>
<div class="item">It is me</div>
<div class="item">BYE</div>
</div>
<div class="container">
<div class="item">Hello World, again!</div>
<div class="item">It is me, again?</div>
<div class="item">BYE</div>
</div>
</body>
You need to swap
justify-content: space-between;
for
justify-content: space-around;
Working Example:
.container {
display: flex;
justify-content: space-around;
}
.item {
flex: 1 1 33%;
margin: 6px;
padding: 6px;
color: rgb(255,255,255);
background-color: rgb(255,0,0);
font-weight: bold;
}
<div class="container">
<div class="item">Hello World</div>
<div class="item">It is me</div>
<div class="item">BYE</div>
</div>
<div class="container">
<div class="item">Hello World, again!</div>
<div class="item">It is me, again?</div>
<div class="item">BYE</div>
</div>
Please check the code. There is no empty space on right. padding: 10px for body and .container have margin-bottom: 30px; also .item have margin-bottom: 10px;. I think you need to learn more about the flex box.
body
{
margin: 0;
padding: 10px;
background-color: #898989;
}
.container
{
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 30px;
border: 2px solid #000;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-moz-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-moz-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.container .item
{
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 10px;
border: 5px solid #f0f;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
<body>
<div class="container">
<div class="item">Hello World</div>
<div class="item">It is me</div>
<div class="item">BYE</div>
</div>
<div class="container">
<div class="item">Hello World, again!</div>
<div class="item">It is me, again?</div>
<div class="item">BYE</div>
</div>
</body>
If I understood the question correctly:
.item {
flex: 1;
text-align: center;
}
If you instead mean centering the entire div, use:
.container {
margin: 0 auto;
}
I hope your code is working correctly, just applied background and observed there is no space after the right most div
Refer this bootply http://www.bootply.com/T0TTJD1kTO
Instead of flex:1 you can use opacity:0.99 on child items, it will solve your Issue.
Here is an link to fiddle:
.item {
opacity: 0.99;
}
It's because all the child has same name, it's creating some problem.
Other Way to solve this is simply remove flex:1 or remove .item in css, it will automatically resolve it.
Here is working example of that in my Fiddle, you can check it.
https://jsfiddle.net/ABhimsaria/z7a4b7jo/
It's important to remember the initial settings of a flex container.
Some of these settings include:
flex-direction: row - flex items will align horizontally.
justify-content: flex-start - flex items will stack at the start of the line on the main axis.
align-items: stretch - flex items will expand to cover the cross-size of the container.
flex-wrap: nowrap - flex items are forced to stay in a single line.
flex-shrink: 1 - a flex item is allowed to shrink
Note the last setting.
Because flex items are allowed to shrink by default (which prevents them from overflowing the container), the specified flex-basis / width / height may be overridden.
For example, flex-basis: 100px or width: 100px, coupled with flex-shrink: 1, will not necessarily be 100px.
To render the specified width – and keep it fixed – you will need to disable shrinking:
div {
width: 100px;
flex-shrink: 0;
}
OR
div {
flex-basis: 100px;
flex-shrink: 0;
}
OR, as recommended by the spec:
flex: 0 0 100px; /* don't grow, don't shrink, stay fixed at 100px */
Some Cool Useful Links to know in-depth about flex and to play with them are:
http://flexboxfroggy.com/
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
Center and bottom-align flex items
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Related
I'm trying to center an <amp-img> in a div vertically.
<div class="outer" style="height: 100vh">
<amp-img class="inner" layout="responsive"></amp-img>
</div>
So far I've tried these ways, but they don't work:
First
.outer {
display: flex;
justify-content: center;
align-items: center;
}
In this case, the image disappears.
Second
.outer {
line-height: 100vh
}
.inner {
display: inline-block;
vertical-align: center;
}
Also the image's size goes to 0 x 0 and the image disppears.
And so on
Other ways also make the image disppear or don't work as expected.
Is there a way to center <amp-img> vertically by any chance?
Your first example was very close to solution:
See example:
.inner{
flex-basis: 0;
-ms-flex-preferred-size: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.outer {
display: flex;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100vh
}
<div class="outer">
<amp-img class="inner" layout="responsive">your image</amp-img>
</div>
I'm using amchart and I want to display multiple charts in one page (as columns), my problem is that I don't want scroll bar no matter how many charts I add (yes I want them to squish) also when I display only one chart I want it in it's normal size (not squished or small)
How can I achieve that?
I'm trying now with images and if it works I will do it on my charts.
html:
<div class="content">
<div class="row">
<div class="cell">
<img src="http://i.imgur.com/OUla6mK.jpg"/>
</div>
<div class="cell">
<img src="http://i.imgur.com/M16WzMd.jpg"/>
</div>
<div class="cell">
<img src="http://i.imgur.com/M16WzMd.jpg"/>
</div>
<div class="cell">
<img src="http://i.imgur.com/M16WzMd.jpg"/>
</div>
</div>
</div>
</div>
css:
body{ overflow-y : hidden;}
.content {
background-color: yellow;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
flex-direction: column;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center;
background-color: red;
}
.cell {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
padding: 10px;
margin: 10px;
background-color: green;
border: 1px solid red;
text-align: center;
}
img {max-height:100%;}
on jsfiddle: http://jsfiddle.net/89dtxt6s/356/
Thanks!
Step 1: Add the following to .row to ensure it fills the viewport height:
.row {
height: 100vh;
}
Step 2: You need to give each .cell a flex display. Additionally, you'll need to adjust your flex-basis (third argument to the shorthand) to 100%. Finally, you'll need to set min-height to zero, in order for each element to totally shrink, if need be.
.cell {
display: flex;
flex-direction: column;
flex: 1 1 100%; /* no longer auto */
min-height: 0;
}
Step 3: Add a one-hundred percent width and height to the image.
img {
width: 100%;
height: 100%;
}
Result: squishy images. Ugly? Sure. But I'm not judging.
https://jsfiddle.net/jaunkv7k/
I have seen a few questions like mine, but none of them seemed to be sucessfully answered. My problem might be simple, but I dont get my mistake.
I use several flexboxes in each other. When i change the browsers size it should resize the same way. But at a point the childrens are overflowing the parent flexbox - Ugly
Because I've not found my mistake, i started a new HTML doc - I still have the mistake.
The "gamebox"s children dont do as I want them to.
Here's a fiddle: Live-Demo
Thank you for your help
- RoetzerBub
html , body, main {
margin: 0;
padding: 0;
min-height: 100%;
min-width: 100%;
}
body{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
header, footer{
display: flex;
min-width: 100%;
justify-content: center;
}
header{
flex-shrink: 0;
background-color: #cc0000;
color: white;
z-index: 10;
margin-bottom: 10px;
}
main{
display: flex;
justify-content: center;
align-items: center;
}
footer{
background-color: #444444;
color: white;
flex-shrink: 0;
z-index: 10;
margin-top: 10px;
}
/*as*/
.gamebox{
display: flex;
flex-direction: row;
min-width: 30%;
max-width: 45%;
border: 2px solid #b30000;
justify-content: space-between;
align-items: center;
}
.gb_left, .gb_center, .gb_right{
margin: 2%;
justify-content: space-around;
background-color: yellow;
}
.gb_left{
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}
.gb_right{
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}
.gb_center{
display: flex;
flex-direction: column;
justify-content: space-between;
}
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="flexstyle.css">
</head>
<body>
<header>HEADER</header>
<main>
<div class="gamebox">
<div class="gb_left">
FLAG
TEAM-A
</div>
<div class="gb_center">
type<br/>
SCORE<br/>
date
</div>
<div class="gb_right">
TEAM-B
FLAG
</div>
</div>
</main>
<footer>FOOTER</footer>
</body>
</html>
It doesn't really make sense here to define the children as flex containers again - there are no elements in them (divs or spans), only text (i.e. nothing that could function as a flex item).
In the following fiddle I removed all this and used the following CSS settings:
.gamebox{
display: flex;
flex-direction: row;
min-width: 30%;
max-width: 45%;
border: 2px solid #b30000;
justify-content: space-between;
align-items: center;
}
.gb_left, .gb_center, .gb_right{
margin: 2%;
background-color: yellow;
min-width: 29%;
word-wrap: break-word;
}
The very last one makes sure that when a word is longer than the width of its container, it's broken.
Here is the fork of your fiddle: https://jsfiddle.net/o6wxy5z7/
To prevent elements from overflowing their containers you need to allow them to shrink as well as grow, for example:
.gb_left{
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}
can be changed to:
.gb_left{
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 1 auto;
}
using the shorthand to assign flex-grow, flex-shrink, and flex-basis.
#media (max-width:400px) {
.gamebox {
flex-direction: column;
}
}
Which prevents overflow and keeping in touch with responsive design element
First off, there are four styles you are using for the flex's children that don't belong to them.
Remove these from the flex children (.gb-left, .gb-center, and .gb-right.):
display
justify-content
align-items
flex-direction
Here is a good article on what should be assigned to who: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Now for your problem with the children not shrinking past a certain point -- the text wraps as much as it can and then when the text is as small as it can be it holds the width of the box open.
There is an easy way around this, although it will mean cutting off the text.
Just assign overflow: hidden; to the children.
.gb_left, .gb_center, .gb_right {
overflow: hidden;
margin: 2%;
background-color: yellow;
}
Is it possible to use display: flex; to align all items to the left (flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;) but the container it self to the center (like margin: 0 auto;)?
It seems like flex-containers are always scaled to 100% width, why the automatic margin won't work. Does anybody have an idea how to achieve what I try?
.container {
width: auto;
margin: 0 auto;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox; // IE10 uses -ms-flexbox
display: -ms-flex; // IE11
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
.item {
display: block;
width: 220px;
}
EDIT: Important! While the container has an auto width!
Yes, using text-align:center on a parent (or body) and display:inline-flex instead of display:flex.
This operates much the same as the difference between display:inline-block and display:block.
MDN says:
The element behaves like an inline element and lays out its content according to the flexbox model.
body {
background: #eee;
text-align: center;
}
.inner {
display: inline-flex;
width: auto;
/* stated but not required */
background: #ccc;
padding: 15px;
}
p {
padding: 15px;
border: 1px solid red;
}
<div class="inner">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
For the parent, you can use display: inline-flex , which has the same effect as display: inline-block compared to display: block.
The flex won't claim the whole page width anymore.
You can find more information about flex here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I searched a lot on this forum but my problem is too specific.
I would like to achieve this, I try for several months but I can not get work... Thanks in advance if anyone can help me :) :)
I would like to align horizontally 2, 3, 4, 5 or more divs, with variable widths, and with static spacement between each div. And all this must not exceed his parent. So I agree that the 4 div can not do 25% of width, but I do not see how to do ..
This would be a great use case for flex-box. I have used the same code for both the cases. The CSS doesn't change, but the HTML does:
.flex-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
background: #999;
margin: 15px;
padding-right: 5px;
}
.flex-item {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
background: #99f;
margin: 5px 0 5px 5px;
}
<div class="flex-container">
<div class="flex-item">Item</div>
<div class="flex-item">Item</div>
<div class="flex-item">Item</div>
</div>
<div class="flex-container">
<div class="flex-item">Item</div>
<div class="flex-item">Item</div>
<div class="flex-item">Item</div>
<div class="flex-item">Item</div>
</div>
You don't need to change the CSS according to the number of sub elements. I have given the example with three and four <div>s.