I can't figure it out. If I have something like this:
html,body,div {margin:0;padding:0;}
.cont {
display: flex;
justify-content: space-between;
height: 100px;
background: #eee;
}
.one, .two, .three {width: 150px;}
.one {
background: #009;
}
.two {
background: #090;
}
.three {
background: #900;
}
<div class="cont">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
Then, how would I change the .two, so it would be exactly after the .one without spacing? The self-align didn't work for me, for some reason.
It's about flex, of course. Not aligning it at all cost.
I want to be able to change only the .two, without touching the other elements.
Is this possible using flex?
Simply adjust the margin of the .two:
html,
body,
div {
margin: 0;
padding: 0;
}
.cont {
display: flex;
height: 100px;
background: #eee;
/* removed this
justify-content: space-between;*/
}
.one,
.two,
.three {
width: 150px;
}
.one {
background: #009;
}
.two {
background: #090;
margin-right: auto; /*added this*/
}
.three {
background: #900;
}
<div class="cont">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
Related
Imagine a code like this:
.div {
width: 100%;
height: 100px;
background-color: green;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
}
.div2 {
width: 100px;
height: 100px;
background-color: blue;
}
.main {
background-color: yellow;
}
<div class="main">
<div>
<div class="div"></div>
<div class="div1"></div>
</div>
<div class="div2"></div>
</div>
It will render something like this:
I want that the blue div comes up and stay on the right of the red div. Imagine that I can´t change the divs from where they are, so I need to do it in css. How can I do it?
Without changing the markup, if you set float: left to the red <div> then you could put the blue <div> to its right side
.div {
width: 100%;
height: 100px;
background-color: green;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.div2 {
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
vertical-align: top;
}
.main {
background-color: yellow;
}
<div class="main">
<div>
<div class="div"></div>
<div class="div1"></div>
</div>
<div class="div2"></div>
</div>
The previous solution which uses float on the red div works well, but here is another possible solution:
Apply position: relative; to the blue div (to be able to move it in relation to its default position) and add top: -100px; left: 100px; to move it up next to the red div:
.div {
width: 100%;
height: 100px;
background-color: green;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
}
.div2 {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
top: -100px;
left: 100px;
}
.main {
background-color: yellow;
}
<div class="main">
<div>
<div class="div"></div>
<div class="div1"></div>
</div>
<div class="div2"></div>
</div>
This can also be done with the grid CSS. Here I used a named template box and then in the "chatty verbose" CSS I put the positional related for each "block". I added classes to the CSS just for clarity but you could update to your classes.
I added some color and things just for clarity and visual references but kept the "position relate" in separate CSS chunks.
.main {
font-size: 2rem;
display: grid;
grid-template: "box";
background-color: yellow;
}
.main *,
.main::before {
grid-area: box;
}
.green-block {
place-self: start;
}
.red-block {
width: 50%;
place-self: end start;
}
.blue-block {
width: 50%;
place-self: end end;
}
.green-block {
height: 3rem;
background-color: green;
}
.red-block {
height: 3rem;
background-color: red;
}
.blue-block {
background-color: blue;
}
.blue-block,
.green-block,
.red-block {
/* color for clarity and just to super center the text in the blocks */
display: grid;
color: cyan;
font-family: sans-serif;
text-transform: uppercase;
place-items: center;
}
<div class="main">
<div>
<div class="div green-block">green</div>
<div class="div1 red-block">red</div>
</div>
<div class="div2 blue-block">blue</div>
</div>
Here is an example of my code :
.flex-container {
height: 300px;
width: 300px;
display: flex;
align-items: center;
justify-content: center;
background-color: #ffeeee
}
#item1 {
width: 100px;
height: 100px;
background-color: blue;
}
#item2 {
width: 120px;
height: 120px;
background-color: red;
}
<div class="flex-container">
<div id="item1"></div>
<div id="item2"></div>
</div>
https://jsfiddle.net/vL508wax/
I want the blue square to be centered and the top of the red square to be flush with the top of the blue square.
I know I can do this with margin-top for example but I don't think that's a good way to go. Can I do this with flexbox directly ?
A CSS grid solution since it would be difficult with flexbox:
.flex-container{
height:300px;
width:300px;
display:grid;
grid-auto-flow:column; /* side by side */
grid-template-rows:100px; /* the blue height here */
/* center everything*/
align-content:center;
justify-content:center;
/**/
background:
linear-gradient(green 0 0) center/100% 1px no-repeat,
#ffeeee
}
#item1{
width:100px;
height:100%;
background-color:blue;
}
#item2{
width:120px;
height:120px;
background-color:red;
transition:1s all;
}
#item2:hover {
height:160px;
}
<div class="flex-container">
<div id="item1">
</div>
<div id="item2">
</div>
</div>
I'm not sure about your use case nor have I done enough testing with this, But if there will always be 2 elements, you can make use of flex wrap alongside align-content: center;
.flex-container {
height: 300px;
width: 300px;
display: flex;
align-content: center;
flex-wrap: wrap;
justify-content: center;
background-color: #ffeeee
}
#item1 {
width: 100px;
height: 100px;
background-color: blue;
}
#item2 {
width: 120px;
height: 160px;
background-color: red;
}
<div class="flex-container">
<div id="item1"></div>
<div id="item2"></div>
</div>
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
I have the following html/css. Which renders like this:
.parent {
display: flex;
width: 200px;
height: 100px;
background-color: red;
}
.one {
flex: 1;
background-color: green;
}
.two {
flex: 1;
/* width: 100px; <-- this is what I'd like to achieve */
background-color: yellow;
}
.inner {
width: 150px; /* <-- this is bigger than width of .parent */
height: 50px;
background-color: blue;
}
<div class="parent">
<div class="one"></div>
<div class="two">
<div class="inner"></div>
</div>
</div>
As you can see the div with .inner is 150px causing its parent div, with flex: 1, to take more space.
What I'd like to achieve is this:
I know the existence and tried to use, flex-grow and flex-shrink. I couldn't make it work.
The question: is there a way to make it work using only flexbox?
Easily managed with position: relative one two and position:absolute on inner
.parent {
display: flex;
width: 200px;
height: 100px;
background-color: red;
}
.one {
flex: 1;
background-color: green;
}
.two {
position: relative;
flex: 1;
/* width: 100px; <-- this is what I'd like to achieve */
background-color: yellow;
}
.inner {
position:absolute;
width: 150px; /* <-- this is bigger than width of .parent */
height: 50px;
background-color: blue;
}
<div class="parent">
<div class="one"></div>
<div class="two">
<div class="inner"></div>
</div>
</div>
Only using max-width:50% on class two
DEMO 2
.parent {
display: flex;
width: 200px;
height: 100px;
background-color: red;
}
.one {
flex: 1;
background-color: green;
}
.two {
flex: 1;
max-width: 50%;
/* width: 100px; <-- this is what I'd like to achieve */
background-color: yellow;
}
.inner {
width: 150px; /* <-- this is bigger than width of .parent */
height: 50px;
background-color: blue;
}
<div class="parent">
<div class="one"></div>
<div class="two">
<div class="inner"></div>
</div>
</div>
I've found the solution I am looking for on SoF but the issue persists. I'm obviously not doing something correctly. Perhaps another pair of eyes would be helpful.
Basically, I want to show a hidden div while I hover over a separate div. While on hover over the separate div, it will change bg color.
Thanks for the help.
Here is a CodePen of what I have so far.
HTML
<div class="container-fluid">
<div class="image">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
<div class="one-text">
<p>Here is some text</p>
</div>
<div class="two-text">
<p>Here is some text</p>
</div>
<div class="three-text">
<p>Here is some text</p>
</div>
<div class="four-text">
<p>Here is some text</p>
</div>
<div class="five-text">
<p>Here is some text</p>
</div>
</div>
CSS
body {
background-color: #c5d5cb;
color: #fff;
font-family: Open Sans;
font-weight: 300;
margin: 0 auto;
}
.container-fluid {
background-color: #9fa8a3;
height: 600px;
padding: 30px;
}
.container-fluid .image {
background-color: #e3e0cf;
height: 100%;
width: 50%;
float: right;
padding: 30px;
display: flex;
justify-content: space-between;
}
.container-fluid .image .one {
background-color: #c5d5cb;
width: 100px;
height: 100px;
margin: 5px;
}
.container-fluid .image .one:hover {
background-color: #3b3a36;
}
.container-fluid .image .two {
background-color: #c5d5cb;
width: 100px;
height: 100px;
margin: 5px;
}
.container-fluid .image .two:hover {
background-color: #3b3a36;
}
.container-fluid .image .three {
background-color: #c5d5cb;
width: 100px;
height: 100px;
margin: 5px;
}
.container-fluid .image .three:hover {
background-color: #3b3a36;
}
.container-fluid .image .four {
background-color: #c5d5cb;
width: 100px;
height: 100px;
margin: 5px;
}
.container-fluid .image .four:hover {
background-color: #3b3a36;
}
.container-fluid .image .five {
background-color: #c5d5cb;
width: 100px;
height: 100px;
margin: 5px;
}
.container-fluid .image .five:hover {
background-color: #3b3a36;
}
.container-fluid .one-text {
width: 300px;
display: block;
float: right;
display: none;
}
.container-fluid .two-text {
width: 300px;
display: block;
float: right;
display: none;
}
.container-fluid .three-text {
width: 300px;
display: block;
float: right;
display: none;
}
.container-fluid .four-text {
width: 300px;
display: block;
float: right;
display: none;
}
.container-fluid .five-text {
width: 300px;
display: block;
float: right;
display: none;
}
.container-fluid .one:hover + .one-text {
display: block;
}
.container-fluid .two:hover + .two-text {
display: block;
}
.container-fluid .three:hover + .three-text {
display: block;
}
.container-fluid .four:hover + .four-text {
display: block;
}
.container-fluid .five:hover + .five-text {
display: block;
}
Ok I have done this with JS, simply because it would have been too much a hassle with CSS, also, I doubt it's possible in CSS. I will post the CSS rules later on.
I have done it in plain vanilla JS, it will work in all modern browsers.
First I have added a slight transition to everything, instead of display none on the paragraphs i have done:
webkit-transition:.4s;
transition:.4s;
opacity:0;
Then I have created a mouseIn and mouse Out function, with 3 parameters.
function onEntry(whichDiv,whichText, color) {
whichDiv.style.background = color;
whichText.style.opacity = '1';
}
Then, I had to add an EventListener to all divs:
one.addEventListener('mouseover', function(){
onEntry(one, txtOne, "#3b3a36");
}
See, that 3rd parameter, you can change to your desired colors.
Here is the link to the pen:
http://codepen.io/damianocel/pen/vXQqJE
And on the CSS rules to affect other elements on hover, it goes like:
directly inside the container:
container:hover > #element
If cube is next to (after containers closing tag) the container:
container:hover + #element
If the cube is somewhere inside the container:
container:hover #cube
Cheers
Try it
#content:hover #hoverbar{
visibility:visible;
}
LIVE DEMO
Consider the following HTML and CSS:
<div class="wrapper">
<div class="first">The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement .</div>
<div class="second"></div>
</div>
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
</div>
.wrapper {
display: flex;
border: 1px solid black;
width: 300px;
height: 100px;
margin-top: 30px;
}
.first {
flex-grow: 1;
background-color: #aaa;
}
.second {
width: 80px;
background-color: #ddd;
}
and the following result:
Why the first wrapper doesn't respect .second's width: 80px?
How could I fix that using flexbox?
PLAYGROUND HERE
You need to use flex: 1; instead of flex-grow: 1;
.first {
flex: 1;
background-color: #aaa;
}
Demo
Also, I would like to point out that flexbox support isn't good as far as IE is concerned, so if anyones interested in a similar layout with more compatible option, than
<div class="wrapper">
<div class="second"></div>
<div class="first"></div>
</div>
.wrapper {
border: 1px solid black;
width: 300px;
height: 100px;
margin-top: 30px;
}
.wrapper .first {
background: red;
height: 100%;
margin-right: 80px;
}
.wrapper .second {
height: 100%;
width: 80px;
float: right;
background: blue;
}
Demo (Note that I swapped the order of the div in the DOM)