Here below is my css and html code I try hard to make justify-content: space-between; but not working
the class .container is important I can't remove max-width, is there any solution to fix the problem I also use flex:auto , flex:0 0 auto to shrink or give adjustable space to the elements but nothing works for me
Any help is highly appreciated
.mega-wrap {
position: relative;
margin: 35px auto;
overflow: hidden;
}
.mega-wrap .container {
display: flex;
align-items: center;
justify-content: space-between;
align-content: center;
margin: 0 auto;
}
.container {
width: 100%;
max-width: 1145px;
margin: 0 auto;
padding: 0px;
box-sizing: border-box;
}
.dual-wrapper,
.max-wrapper {
position: relative;
display: block;
background: red;
color: #fff;
width: 50%;
overflow: hidden;
margin: 0 auto;
}
<div class="mega-wrap">
<div class="container">
<div class="dual-wrapper">
Example 1
</div>
<div class="max-wrapper">
Example 2
</div>
</div>
</div>
To avoid any confusion, I removed all your CSS code and tried to match with what you want.
.container {
background: red;
color: white;
display: flex;
justify-content: center;
}
.dual-wrapper, .max-wrapper {
display: inline-block;
padding-left: 1rem;
padding-right: 1rem;
}
<div class="container">
<div class="dual-wrapper">
Example 1
</div>
<div class="max-wrapper">
Example 2
</div>
</div>
Related
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 2 years ago.
So i've got div looking like this. My question is how can I align h1 so it stays always on top of this div and rest of content is aligned in the middle of div like how it is now?
HTML:
<div class="container">
<h1>INFO</h1>
<div class="info"><h2>Age</h2><p>20</p></div>
<div class="info"><h2>Adress</h2><p>Wolna 23, Warszawa</p></div>
<div class="info"><h2>Email</h2><p>lorem#gmail.com</p></div>
<div class="info"><h2>Phone</h2><p>669 133 777</p></div>
</div>
CSS:
.container
{
align-items: center;
justify-content: center;
display:flex;
flex-direction: column;
width: 35.5%;
height: 550px;
padding: 20px;
margin: 20px;
}
.info
{
align-items: center;
justify-content: center;
display:flex;
flex-direction: column;
margin: 0 0 15px 0;
}
Can you please check the below code link? Hope it will work for you. We can solve this issue with the help of flex, without using position: absolute;.
You need to remove justify-content: center; from the .container.
We have wrapped all info items in one div like .content and give margin:auto; to them.
Please refer to this link:
https://jsfiddle.net/yudizsolutions/z71rbu6o/7/
.container {
align-items: center;
display: flex;
flex-direction: column;
width: 35.5%;
height: 550px;
padding: 20px;
margin: 20px;
background: #000;
}
h1 {
color: #fff;
}
.content {
margin: auto;
}
.info {
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
margin: 0 0 15px 0;
color: #fff;
}
.info h2,
.info p {
margin: 0;
}
<div class="container">
<h1>INFO</h1>
<div class="content">
<div class="info">
<h2>Age</h2>
<p>20</p>
</div>
<div class="info">
<h2>Adress</h2>
<p>Wolna 23, Warszawa</p>
</div>
<div class="info">
<h2>Email</h2>
<p>lorem#gmail.com</p>
</div>
<div class="info">
<h2>Phone</h2>
<p>669 133 777</p>
</div>
</div>
</div>
Try adding this:
.container h1{
position: absolute;
top: 0vh;
}
if you want to stick it to the top add this:
h1{
position: absolute;
top: 0;
}
Edit: there are a lot of ways, but in all of them you must to take the header out of the flexbox. You can do it like this:
.container {
box-sizing: border-box;
position: relative;
width: 35.5%;
height: 600px;
background-color: coral;
padding: 20px;
}
.info {
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
margin: 0 0 15px 0;
}
.wrapper {
position: relative;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
height: 450px;
top: 50%;
left: 0;
transform: translateY(-50%);
background-color: cadetblue;
width: 100%;
}
.header {
position: absolute;
top: 0;
left: 50%;
margin-top: 0;
transform: translateX(-50%);
background-color: cadetblue;
}
p {
margin: 0.5rem;
}
<div class="container">
<h1 class="header">INFO</h1>
<div class="wrapper">
<div class="info">
<h2>Age</h2>
<p>20</p>
</div>
<div class="info">
<h2>Adress</h2>
<p>Wolna 23, Warszawa</p>
</div>
<div class="info">
<h2>Email</h2>
<p>lorem#gmail.com</p>
</div>
<div class="info">
<h2>Phone</h2>
<p>669 133 777</p>
</div>
</div>
</div>
This question already has answers here:
CSS: Width in percentage and Borders
(5 answers)
Closed 3 years ago.
I want to create a bar to go along the top of a box on a website that I am working on.
This is the desired outcome
Here's my code, I keep getting this overlap
.page {
display: flex;
flex-wrap: wrap;
position: relative;
}
.section {
border: 2px solid #FBA7FF;
width: 85%;
height: 30%;
margin: 1vw;
padding: 1vw;
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.section h1 {
position: relative;
}
.section_header {
border: 4px solid #FBA7FF;
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 95%;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
So far I've got the parent div with position: relative and the child element with position: absolute then setting top and left to 0 width to 100% and bottom to 95% to attempt the desired effect yet it creates an overlap.
I can see that 0 is within the div and doesn't take into account the border which is perhaps why this is happening.
* {
box-sizing: border-box;
margin: 0;
}
.page {
display: flex;
flex-wrap: wrap;
position: relative;
}
.section {
width: 100%;
display: inline-block;
text-align: center;
}
.section_header {
width: 100%;
background: #FBA7FF;
display: block;
height: 70px;
margin-bottom: 20px;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
Remove the position:absolute and use flex-direction:column;
* {
margin: 0;
padding: 0;
}
.page {
display: flex;
flex-wrap: wrap;
flex-direction: column;
min-height: 100vh;
background: lightgrey;
position: relative;
}
.section {
border: 2px solid #FBA7FF;
width: 85%;
margin: 1vh auto;
height: 30%;
background: lightgreen;
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
}
.section_header {
height: 50px;
width: 100%;
background: orange;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
I'm creating a 2 by 2 grid layout using flexbox where the first column items are merged together as shown below:
This works in Google Chrome without a problem. The image can grow until the maximum remaining width allocated by the flexbox. However, it does not work in IE11. The image stretches its container box and I've been googling and trying different solutions to no avail. It seems like my case is a little different from other similar questions.
Here is what it looks like in IE:
Can you help me spot the problem? I've provided a plunker where you can try your solutions.
CSS:
body {
width: 100%;
}
.element {
display: flex;
flex-direction: row;
width: 100%;
}
.name {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 100px;
font-weight: bolder;
}
.detail-wrapper {
display: flex;
flex-direction: column;
flex: 1 0 0;
width: 100%;
}
.detail {
display: flex;
flex: 1 0 0;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.detail img {
max-width: 100%;
}
.name, .detail {
border: 1px solid;
margin: 8px;
padding: 8px;
text-align: center;
word-break: break-word;
}
HTML:
<div class="element">
<div class="name">name</div>
<div class="detail-wrapper">
<div class="detail">
<img src="https://miro.medium.com/max/1200/1*y6C4nSvy2Woe0m7bWEn4BA.png" />
</div>
<div class="detail">
url
</div>
</div>
</div>
https://plnkr.co/edit/q6Xme6ETvW20Gw57CIWQ?p=preview
IE browser has some issues with Flex. It is not able to calculate the values properly with flex.
(1) I suggest you replace max-width with width in .detail img class.
(2) I suggest you replace flex: 1 0 0; with flex: 0 0 auto; in .detail class.
Edit:-
Added img tag inside one extra div solved the issue as informed by #Xegara. It also worked with max-width For IE 11 browser.
Modified code:
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
<style>
body {
width: 100%;
}
.extra_div{
width: 100%;
}
.element {
display: flex;
flex-direction: row;
width: 100%;
}
.name {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 100px;
font-weight: bolder;
}
.detail-wrapper {
display: flex;
flex-direction: column;
/*flex: 0 0 auto;*/
width: 100%;
}
.detail {
display: flex;
/*flex: 1 0 0;*/
flex: 0 0 auto; /*-------------------------made change here */
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.detail img {
max-width: 100%; /*-------------------------made change here */
}
.name, .detail {
border: 1px solid;
margin: 8px;
padding: 8px;
text-align: center;
word-break: break-word;
}
</style>
</head>
<body>
<div class="element">
<div class="name">name</div>
<div class="detail-wrapper">
<div class="detail">
<div class="extra_div">
<img src="https://miro.medium.com/max/1200/1*y6C4nSvy2Woe0m7bWEn4BA.png" />
</div>
</div>
<div class="detail">
url
</div>
</div>
</div>
</body>
</html>
Output in IE 11:
First of all, the first snippet below is the problem I'm trying to fix.
Note that this was working perfectly fine IF display: flex; is applied to body.
However, I do not want to apply style to body which will break Google Web Cache layout.
* More explanation after the first snippet
* { box-sizing: border-box; }
body { margin: 0; }
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
background-color: #ccc;
}
.navigation {
background-color: #f00;
width: 100%;
height: 3rem;
}
.footer {
background-color: #0f0;
width: 100%;
text-align: center;
line-height: 2rem;
}
.content {
background-color: #ff0;
flex: 1;
margin: 0.6rem 0 1.2rem;
}
.container {
background-color: #f0f;
margin: 0 auto;
max-width: 120rem;
width: 100%;
padding: 0 2rem;
}
.centered {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.long-content {
background-color: #fff;
}
<main class="wrapper">
<nav class="navigation">.navigation</nav>
<div class="content">
<section class="container centered">
<div class="long-content">.long-content</div>
</section>
</div>
<footer class="footer">.footer</footer>
</main>
So, removing display: flex; raised this issue:
section within .content does not have the height spanning across .content
Trying to fix it with position: relative on .content and position: absolute on .centered fixed the height issue but raised:
Width of .centered does not span across .content which can be easily fixed with left:0;right:0;
Height does not flow with content in section (I'm out of idea here)
Was it wrong to use position: relative and position: absolute to patch the original issue?
If so, what is the more suitable solution?
* { box-sizing: border-box; }
body { margin: 0; }
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
background-color: #ccc;
}
.navigation {
background-color: #f00;
width: 100%;
height: 3rem;
}
.footer {
background-color: #0f0;
width: 100%;
text-align: center;
line-height: 2rem;
}
.content {
background-color: #ff0;
flex: 1;
margin: 0.6rem 0 1.2rem;
position: relative;
}
.container {
background-color: #f0f;
margin: 0 auto;
max-width: 120rem;
width: 100%;
padding: 0 2rem;
}
.centered {
display: flex;
position: absolute;
height: 100%;
left: 0;
right: 0;
align-items: center;
justify-content: center;
}
.long-content {
background-color: #fff;
height: 1000px;
}
<main class="wrapper">
<nav class="navigation">.navigation</nav>
<div class="content">
<section class="container centered">
<div class="long-content">.long-content</div>
</section>
</div>
<footer class="footer">.footer</footer>
</main>
I continued looking for solution and quickly noticed that I have shallow knowledge about flexbox itself so I went ahead and played with Flexbox Froggy.
After completing all the levels, I noticed that I can align everything without position: absolute by just using justify-content on .wrapper.
Below is my solution for my silly issue.
If you remove height of .long-content, .centered will continue to get aligned vertically.
Thank you froggies and shout out to Codepip!
* { box-sizing: border-box; }
body { margin: 0; }
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
background-color: #ccc;
justify-content: space-between;
}
.navigation {
background-color: #f00;
width: 100%;
height: 3rem;
}
.footer {
background-color: #0f0;
width: 100%;
text-align: center;
line-height: 2rem;
}
.content {
background-color: #ff0;
margin: 0.6rem 0 1.2rem;
}
.container {
background-color: #f0f;
margin: 0 auto;
max-width: 120rem;
width: 100%;
padding: 0 2rem;
}
.centered {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.long-content {
background-color: #fff;
height: 1000px;
}
<main class="wrapper">
<nav class="navigation">.navigation</nav>
<div class="content">
<section class="container centered">
<div class="long-content">.long-content</div>
</section>
</div>
<footer class="footer">.footer</footer>
</main>
Does anyone know how to align an <hr> element inside a flex-container. When I do flex-start all of the other elements align, apart from the <hr>. I need a solution that doesn't use position: absolute on the <hr> element because this affects the document flow and causes other issues.
codepen: https://codepen.io/emilychews/pen/QaPQaW
CSS
body {margin: 0; padding: 0;}
.box {
width: 300px;
height: 300px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
hr {
position: relative;
display: block;
background: white;
height: 3px;
width: 75px;
margin-left: 0 auto;
}
HTML
<div class="box">
<h1> Hello </h1>
<hr>
<p> Thanks </p>
</div>
The hr element has a default margin set, and in Chrome it is set to:
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
And as auto margin's in Flexbox override the justify-content/align-* properties, you need to remove it, which e.g. margin: 0; will, and make the in this case align-items: flex-start; be properly applied.
Stack snippet
body {margin: 0; padding: 0;}
.box {
color: white;
width: 300px;
height: 300px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
hr {
position: relative;
background: white;
height: 3px;
width: 75px;
align-self: flex-start;
margin: 0; /* added */
}
<div class="box">
<h1>Hello</h1>
<hr>
<p>Thanks</p>
</div>
Change your hr to
background: white;
height: 3px;
width: 75px;
margin-left: 0;