I have a container div.
Inside it I have all the child divs each with float left property.
How do space the child div evenly across the row ?
The code pen is as follows:
https://codepen.io/pranavbhagwat81/pen/NWNgaVW
<div class='box'>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
</div>
CSS
.box{
}
.box1{
height:50px;
width:50px;
background-color:violet;
float:left;
}
.box2{
height:50px;
width:50px;
background-color:indigo;
float:left;
}
.box3{
height:50px;
width:50px;
background-color:green;float:left;
}
Use flex instead, with space-between (or space-evenly):
.box {
display: flex;
justify-content: space-between;
}
.box > * {
height: 50px;
width: 50px;
}
.box1 {
background-color: violet;
}
.box2 {
background-color: indigo;
}
.box3 {
background-color: green;
}
.box4 {
background-color: orange;
}
.box5 {
background-color: yellow;
}
.box6 {
background-color: red;
}
.box7 {
background-color: black;
}
.box8 {
background-color: pink;
}
<div class='box'>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
<div class='box4'></div>
<div class='box5'></div>
<div class='box6'></div>
<div class='box7'></div>
<div class='box8'></div>
</div>
If you couldn't use flex, you can calc to determine how much the margin should be:
.box > * {
height: 50px;
width: 50px;
float: left;
}
.box > *:not(:first-child) {
margin-left: calc((100vw - 50px * 8) / 8)
}
.box1 {
background-color: violet;
}
.box2 {
background-color: indigo;
}
.box3 {
background-color: green;
}
.box4 {
background-color: orange;
}
.box5 {
background-color: yellow;
}
.box6 {
background-color: red;
}
.box7 {
background-color: black;
}
.box8 {
background-color: pink;
}
<div class='box'>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
<div class='box4'></div>
<div class='box5'></div>
<div class='box6'></div>
<div class='box7'></div>
<div class='box8'></div>
</div>
Related
The page has elements that are arranged in a row on the desktop. In the mobile version, one of the elements that is in the middle should be placed on a new line, how can flex do this?
.container {
display: flex;
}
.item {
width: 100px;
height: 100px;
display: block;
}
.item:nth-child(1) {
background: green;
}
.item:nth-child(2) {
background: red;
}
.item:nth-child(3) {
background: blue;
margin-left: auto;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
You can try like below:
.container {
display: flex;
}
.item {
width: 100px;
height: 100px;
display: block;
}
.item:nth-child(1) {
background: green;
}
.item:nth-child(2) {
background: red;
}
.item:nth-child(3) {
background: blue;
margin-left: auto;
}
#media screen and (max-width: 720px) {
.container {
flex-wrap: wrap;
}
.item:nth-child(2) {
order: 3;
}
.item:nth-child(3) {
margin-left: calc(100% - 200px); /* 200px is width of 2 boxes */
}
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
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>
I've been struggling to arrange this layout of images.
I've been thinking of using flexbox and i'm pretty sure it's doable with it but I can't manage to find the right way to do it.
If anyone is able to help me i'll be glad.
Here is the layout with each square being an img in a link tag :
img layout
The space between each img must be the same, that's why I've been thinking of using flexbox.
Thanks in advance,
j
Edit: I uploaded what I've been working on :
http://163.172.185.65/flexboxuse.html
Flexbox example with percentage:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
height: 100%;
width: 100%;
display: flex;
flex-flow: row wrap;
}
.sidebar {
background: limegreen;
height: 70%;
width: 30%;
}
.rightCont {
height: 70%;
width: 70%;
display: flex;
flex-flow: row wrap;
}
.red {
background: red;
height: calc(50% - 10px);
width: calc(50% - 10px);
margin-left: 10px;
margin-bottom: 10px;
}
.blue {
background: blue;
height: calc(50% - 10px);
width: calc(50% - 10px);
margin-left: 10px;
margin-bottom: 10px;
}
.yellow {
background: yellow;
height: 50%;
width: calc(50% - 10px);
margin-left: 10px;
}
.sky {
background: cyan;
height: 50%;
width: calc(50% - 10px);
margin-left: 10px;
}
.bottom {
background: violet;
height: calc(30% - 10px);
width: 100%;
margin-top: 10px;
}
<div class="container">
<div class="sidebar"></div>
<div class="rightCont">
<div class="red"></div>
<div class="blue"></div>
<div class="yellow"></div>
<div class="sky"></div>
</div>
<div class="bottom"></div>
</div>
You could approach this with flexbox, but even just float:left will do the trick.
Working Example:
section {
width: 312px;
}
div {
float: left;
width: 100px;
height: 100px;
margin: 0 6px 6px 0;
background-color: gray;
}
div:nth-of-type(1) {
height: 206px;
}
div:nth-of-type(6) {
width: 312px;
margin-bottom: 0;
}
div:nth-of-type(3),
div:nth-of-type(5),
div:nth-of-type(6) {
margin-right: 0;
}
div:nth-of-type(1) {
background-color: lime;
}
div:nth-of-type(2) {
background-color: red;
}
div:nth-of-type(3) {
background-color: blue;
}
div:nth-of-type(4) {
background-color: yellow;
}
div:nth-of-type(5) {
background-color: cyan;
}
div:nth-of-type(6) {
background-color: magenta;
}
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
Second approach (this time with element heights relative to the height of the viewport)
section {
width: calc(100vh + 12px);
}
div {
float: left;
width: 33vh;
height: 33vh;
margin: 0 6px 6px 0;
background-color: gray;
}
div:nth-of-type(1) {
height: calc(66vh + 6px);
}
div:nth-of-type(6) {
width: calc(100vh + 12px);
margin-bottom: 0;
}
div:nth-of-type(3),
div:nth-of-type(5),
div:nth-of-type(6) {
margin-right: 0;
}
div:nth-of-type(1) {
background-color: lime;
}
div:nth-of-type(2) {
background-color: red;
}
div:nth-of-type(3) {
background-color: blue;
}
div:nth-of-type(4) {
background-color: yellow;
}
div:nth-of-type(5) {
background-color: cyan;
}
div:nth-of-type(6) {
background-color: magenta;
}
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
Here is a working example using flex and percentage width:
html,body{
border:0;
margin:0;
height:100%;
}
#wrap
{
width:300px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
#container
{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-between;
height:70%;
}
#green
{
background-color:chartreuse;
width:30%;
order:0;
}
#red
{
background-color:red;
height:48%;
}
#blue
{
background-color:blue;
height:48%;
}
#yellow
{
background-color:yellow;
height:49%;
}
#aquamarine
{
background-color:aqua;
height:49%;
}
#purple
{
background-color:purple;
height:28%;
}
.col
{
width:32%;
display:flex;
flex-direction:column;
justify-content:space-between;
}
<div id="wrap">
<div id="container">
<div id="green"></div>
<div class="col">
<div id="red"></div>
<div id="yellow"></div>
</div>
<div class="col">
<div id="blue"></div>
<div id="aquamarine"></div>
</div>
</div>
<div id="purple"></div>
</div>
I am trying to nest some flexbox columns inside a flexbox.
I have this HTML:
<div class="container">
<div class="row flex height">
<div class="col-md-6 red">
</div>
<div class="col-md-6 orange">
<div class="flex flex-columns">
<div class="row black flex">
<div class="col-md-3 yellow">
</div>
<div class="col-md-9 green">
</div>
</div>
<div class="row white flex">
<div class="col-md-6 blue">
</div>
<div class="col-md-6 indigo">
</div>
</div>
</div>
</div>
</div>
</div>
and my CSS is like this:
.container {
border: 1 px solid pink;
}
.height {
min-height: 500px;
}
.flex {
box-sizing: border-box;
display: flex;
}
.flex-columns {
display: flex;
flex-direction: column;
}
.row {
flex: 1;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.indigo {
background-color: indigo;
}
.violet {
background-color: violet;
}
.black {
background-color: black;
}
.white {
background-color: pink;
}
Here is a diagram illustrating what I am trying to achieve:
and here is my codepen: http://codepen.io/r3plica/pen/PqWqKx?editors=110
Hopefully you can understand what I am trying to do, but I can't get it to work properly.
Can anyone help?
If I understand it well, you want
.flex-columns {
display: flex;
flex-direction: row;
}
.row {
flex: 1;
}
#import '//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css';
.flex {
min-height: 500px;
box-sizing: border-box;
display: flex;
}
.flex-columns {
box-sizing: border-box;
display: flex;
align-content: stretch;
}
.row {
flex: 1;
margin: 0; /* Remove stupid bootstrap margins */
}
.red { background-color: red; }
.orange { background-color: orange; }
.yellow { background-color: yellow; }
.green { background-color: blue; }
.blue { background-color: orange; }
.indigo { background-color: indigo; }
.violet { background-color: violet; }
.black { background-color: black; }
.white { background-color: white; }
<div class="container">
<div class="row flex">
<div class="col-md-6 red">
</div>
<div class="col-md-6 orange">
<div class="flex flex-columns">
<div class="row black"></div>
<div class="row violet"></div>
</div>
</div>
</div>
</div>
I modified your HTML and CSS to make the results fit the image (colors notwithstanding).
Added a padding to every div
Added flex-grow to some of the flex-items, to make them fill their parents (by adding the row class to them)
Removed div.flex.flex-columns and change its classes to its parent, so it changes to div.col-md-6.orange.flex.flex-columns. It's superflous and messing your layout.
Modify the flex-grows of the purple divs (in the image) to change their ratios
You can run the following snippet to see the results.
The inner divs still need some padding to really mimic the image, but I'm guessing that's not the main point of your question.
.container {
border: 1px solid pink;
}
div {
padding: 10px;
}
.height {
min-height: 500px;
}
.flex {
box-sizing: border-box;
display: flex;
}
.flex-columns {
display: flex;
flex-direction: column;
}
.row {
flex: 1;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
flex-grow: 2;
}
.green {
background-color: green;
flex-grow: 3;
}
.blue {
background-color: blue;
flex-grow: 3;
}
.indigo {
background-color: indigo;
flex-grow: 2;
}
.violet {
background-color: violet;
}
.black {
background-color: black;
}
.white {
background-color: pink;
}
<div class="container">
<div class="row flex height">
<div class="col-md-6 red row"></div>
<div class="col-md-6 orange row flex flex-columns">
<div class="row black flex">
<div class="col-md-3 yellow row"></div>
<div class="col-md-9 green row"></div>
</div>
<div class="row white flex">
<div class="col-md-6 blue row"></div>
<div class="col-md-6 indigo row"></div>
</div>
</div>
</div>
</div>
your .flex-column shouldn't have a flex-direction set:
.flex-columns {
box-sizing: border-box;
display: flex;
/* flex-direction: column; */
align-content: stretch;
}
add the following to your css:
.flex-columns > .row{
flex: 1 0 auto;
margin: 0; /* this is to reset the column padding/margins added by bootstrap */
}
forked pen - http://codepen.io/braican/pen/PqWqvr
#import '//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css';
.flex {
min-height: 500px;
box-sizing: border-box;
display: flex;
}
.flex-columns {
box-sizing: border-box;
display: flex;
/* flex-direction: column; */
align-content: stretch;
}
.flex-columns > .row{
flex: 1 0 auto;
margin: 0;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.green {
background-color: blue;
}
.blue {
background-color: orange;
}
.indigo {
background-color: indigo;
}
.violet {
background-color: violet;
}
.black {
background-color: black;
}
.white {
background-color: white;
}
<div class="container">
<div class="row flex">
<div class="col-md-6 red">
</div>
<div class="col-md-6 orange">
<div class="flex flex-columns">
<div class="row black">
</div>
<div class="row white">
</div>
</div>
</div>
</div>
</div>
I have the following html:
<div class="parent">
<div class="sibling" data-modal=".child"></div>
<div class="child"></div>
</div>
When I hover over the sibling element, its border changes color and causes the child to show. I want to hold that styling whether sibling or child are hovered over.
I could add the css permanently to sibling using JS, then remove it on mouseleave but would prefer a css solution if possible
CSS:
.parent {
position:relative;
width:250px;
height:200px;
background-color: #f1f1f1;
}
.sibling {
width:100px;
height:30px;
padding:6px;
border:4px solid red;
}
.sibling:hover {
border-color: green;
}
.child {
position: absolute;
width:200px;
height:50px;
top:70px;
background: blue;
display: none;
}
Is this possible?
Here's a fiddle
i am not so sure if i get you right, but is this something you would need?
.parent {
position:relative;
width:1000px;
height:200px;
}
.sibling {
width:100px;
height:30px;
padding:8px;
border:1px solid red;
}
.sibling:hover {
border-color: blue;
}
.sibling:hover + .child {
display: block;
}
.child {
position: absolute;
width:200px;
height:50px;
top:60px;
background: blue;
display: none;
}
<div class="parent" data-modal="child">
<div class="sibling"></div>
<div class="child">test</div>
</div>
pure css solution
Yes,
Add a hover condition to the parent.
.parent {
position:relative;
width:250px;
height:200px;
background-color: #f1f1f1;
}
.sibling {
width:100px;
height:30px;
padding:6px;
border:4px solid red;
}
.parent:hover .sibling, /* here */
.sibling:hover {
border-color: green;
}
.child {
position: absolute;
width:200px;
height:50px;
top:70px;
background: blue;
display: none;
}
<div class="parent">
<div class="sibling" data-modal=".child"></div>
<div class="child"></div>
</div>
Yes its possible
$( ".parent" ).mouseenter(function() {
var divName = $(this).data('modal');
$(divName).fadeIn('fast').animate({
'top': '30px'
}, {duration: 'slow', queue: false}, function() { /*Animation complete*/ });
});
.parent {
position:relative;
width:1000px;
height:200px;
}
.parent:hover .sibling{border-color: #000;}
.sibling {
width:100px;
height:30px;
padding:8px;
border:1px solid red;
}
.child {
position: absolute;
width:200px;
height:50px;
top:60px;
background: blue;
display: none;
}
<div class="parent" data-modal="child">
<div class="sibling"></div>
<div class="child"></div>
</div>
You dont need javascript, pure CSS solution exist. Refer CSS selectors and the "+" selector is what you need to control sibling classes.
So in your case,
.sibling:hover + .child{
display:block;
}
controls the child class when the sibling class is hovered on.
.parent {
position: relative;
width: 1000px;
height: 200px;
background: pink;
}
.sibling {
width: 100px;
height: 30px;
padding: 8px;
border: 1px solid red;
background: blue;
}
.child {
position: absolute;
width: 200px;
height: 50px;
top: 60px;
background: green;
display: none;
}
.sibling:hover {
border: 3px solid green;
}
.sibling:hover + .child {
display: block;
}
<div class="parent" data-modal="child">
<div class="sibling"></div>
<div class="child"></div>
</div>
Hope this helps