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;
}
Related
I just want to put the numbers in the midle of the flex items but I just can't figure out how to do it. I tried many ways but none of them worked with flexbox... It is just a learning material where I experiment with flexbox so I want to stick with this display.
As I said I tried many ways so there might be some things that are not needed to be there, sorry about that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flex</title>
<style>
* {
margin: 0px;
}
.con {
display: flex;
background-color: aquamarine;
border: 4px solid wheat;
padding: 16px;
height: 511px;
width: 95%;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0px;
}
.i {
height: 60px;
width: 400px;
background-color: red;
border: 4px solid darkslategray;
flex: 1 1 auto;
}
#i2 {
flex: 2 4 auto;
}
p {
position: relative;
vertical-align: middle;
text-align: center;
margin: 0 auto;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="con">
<div id="i1" class="i"><p>1</p></div>
<div id="i2" class="i"><p>2</p></div>
<div id="i3" class="i"><p>3</p></div>
</div>
</body>
</html>
You can do this by display: flex or or position: absolute
/* can used display flex */
.con > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* or used position */
.con > div {
position: relative;
}
.con > div p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This is happening because your <div class='i'></div> elements have height of 60px in css. So they are the ones that make the whole height of the block they are inside of.
Give each of the <div class='i'></div> elements display: flex; and align-items: center;. This will center the numbers both on x and y axis.
Here is the CodePen: https://codepen.io/Juka99/pen/qBVJdNv
Maybe you can use something like this
I just add some extra flex inside con class:
.con > div {
display: flex;
align-items: center;
}
you can use display: flex; align-items:center; for .i class
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/
I have flexbox that I want to place two more flexboxes in.
.Summary_Row{
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-flow: row;
flex-flow: row;
width: 100%;
margin-top: 10px;
border-bottom: 2px solid #d3d3d3;
}
.col_left{ order:1; width: 33%; display:flex; justify-content: center; text-align: center;}
.col_center{order:2; width: 33%; display:flex; justify-content: center; border-right: 2px solid #d3d3d3; border-left: 2px solid #d3d3d3; text-align: center;}
.col_right{ order:3; width: 33%; display:flex; justify-content: center; text-align: center;}
.int_row{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-flow: row;
flex-flow: row;
width: 100%;
}
#inside_left{order:1; display:flex; justify-content: center; align-items: center; width: 25%;}
#inside_right{order:2; display:flex; flex-flow: column; justify-content: center; width: 75%; text-align:left;}
In my CSS above, I have a flexbox (summary_row) that is split into three equal columns. For col_right, I want to further split that into two more boxes side by side, one taking up 25% and the other 75% of col_right. I have int_row which I thought should contain inside_left and inside_right, but don't know if that's superfluous. Even though I have int_row set to 100%, the width actually doesn't extend the even close to the full width of col_right.
Blue in the image above is int_row and green is inside_right. Notice that the blue doesn't come close to being 100% of the width. I basically don't want the image and green to overlap. I'm thinking if the width is extended more, the overlap wouldn't occur.
Any suggestions on how I can achieve this or if I'm even thinking about this correctly?
I've made a working example for you on CodePen.
html:
<div class="row">
<div class="row__left">.row__left</div>
<div class="row__center">.row__center</div>
<div class="row__right">
<div class="row__right-a">.row__right-a</div>
<div class="row__right-b">.row__right-b</div>
</div>
</div>
css:
.row {
display: flex;
border: 1px solid #000;
padding: .5em;
}
.row__left,
.row__center,
.row__right {
flex: 0 0 33.3333333%;
border:1px solid red;
padding: .5em;
box-sizing: border-box;
}
.row__right {
display: flex;
}
.row__right-a {
flex: 0 0 25%;
background-color: blue;
}
.row__right-b {
flex: 0 0 75%;
background-color: green;
}
You did not need the extra .int_row element. Because a flex item (child) can also be a flex container.
You should also use flex-basis and flex-grow instead of width when trying to make grids with flexbox. I used the shorthand flex property. It's always a good idea to use the flex shorthand property because it forces you to set the flex-grow, shrink and basis value. Some browsers (IE) don't have the right default values so that will save you some trouble.
Also, this is the go to article to get started with Flexbox.
I want my background to be 3 equally high blocks of color (say the German flag).
I created an HTML file with header, main, and footer. And then added the CSS below. But this merely creates 3 small blocks at the top of the page. I tried replacing min-height with height and max-height. No luck. I'm missing something elementary. What?
* {
margin: 0;
padding: 0;
}
body {
height: 100%;
}
header {
background-color: black;
min-height: 33%;
}
main {
background-color: red;
min-height: 33%;
}
footer {
background-color: gold;
min-height: 33%;
}
The % of height doesn't work since the body doesn't have defined height. HTML doesn't understand - 100% of what?.
You should define the body height in vh (viewport height units, 1 vh = 1/100 of viewport height):
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
}
header {
background-color: black;
min-height: 33%;
}
main {
background-color: red;
min-height: 33%;
}
footer {
background-color: gold;
min-height: 33%;
}
<header></header>
<main></main>
<footer></footer>
CSS has limited support for getting the screen size.
Javascript on the other hand has the ability to do this and it is supported by all browsers as long as js is enabled for them.
<script>
function setBodyHeight(){
document.body.style.height = window.innerHeight + "px";
}
setBodyHeight();
onresize = setBodyHeight;
</script>
add this to the bottom of the html body and your current css should work as expected.
Learn flexbox from early on
.main {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 300px;
}
You need a height declaration somewhere though, but other than this, check the pen
http://codepen.io/damianocel/pen/VjxrWN
I got a situation where flex box is not working the way I want it to within Chrome but it works in other browsers (apart from iOS mobile devices).
I am struggling to vertically align any content within Chrome but works in everything else. Any ideas?
Also, does anyone know a way I can dynamically stretch a div to a certain % of the div class content which will also work within chrome?
Thanks in advance. See the bottom for demo and screenshots.
HTML
<div class="container">
<div class="content">
<h2>Ticket System <span style="color:#339933; font-weight:bold;">Open</span> Customer Ticket List</h2>
<a class="BlueButton" href="ticket_view_cust_ticket.php">Open Customer Tickets</a>
<a class="BlueButton" href="ticket_view_cust_ticket_rejected.php">Rejected Customer Tickets</a>
<div class="centerContent">
There are currently no open customer tickets
</div>
</div>
</div>
CSS
html,body
{
height: 100vh;
}
body
{
display: table;
margin: 0 auto;
font-family: Tahoma,Arial,Sans-Serif;
}
.container
{
height: 98vh;
vertical-align: middle;
width: 70vw;
min-width:1024px;
margin-left:auto;
margin-right:auto;
margin-top: 1vh;
display: flex;
flex-direction: column;
}
.content
{
background-color: #ff0000;
flex: auto;
webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-shrink: 0;
-o-flex-shrink: 0;
flex-shrink: 0;
text-align: center;
font-size: 12px;
padding-top:20px;
min-height:600px;
}
.centerContent
{
height: 95%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
Demo - https://jsfiddle.net/qr2tpgo6/1/
Container Screenshot - http://prntscr.com/azp8bk
Firefox - http://prntscr.com/azp4oj
Chrome - http://prntscr.com/azp4hy
Your container is missing display: flex, so flex properties aren't working.
Add this:
.content
{
background-color: #ff0000;
flex: auto;
flex-direction: column;
flex-shrink: 0;
text-align: center;
font-size: 12px;
padding-top:20px;
min-height:600px;
display: flex; /* new; establish flex container */
justify-content: center; /* new; center children vertically */
}
Revised Fiddle