I wonder if there is a flex-way to create fluid like behaviour of the parent container: by moving red boxes n1 and n2 to the left of the blue box n3 and as a result moving the red box n3 to the left side of the container
.parent {
display: flex;
width: 525px;
flex-wrap: wrap;
background-color: green;
}
.child {
flex-wrap: wrap;
display: flex;
}
.box {
width: 100px;
height: 100px;
margin: 5px;
}
.blue .box {
background-color: blue;
}
.red .box {
background-color: red;
}
<div class='parent'>
<div class='child blue'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
</div>
<div class='child red'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
</div>
</div>
You can use display:contents (https://caniuse.com/#feat=css-display-contents) on .child elements making the boxes behaving as they was child of the .parent element.
.parent {
display: flex;
width: 555px;
flex-wrap: wrap;
background-color: green;
}
.child {
flex-wrap: wrap;
display: flex;
display:contents
}
.box {
width: 100px;
height: 100px;
margin: 5px;
}
.blue .box {
background-color: blue;
}
.red .box {
background-color: red;
}
<div class='parent'>
<div class='child blue'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
</div>
<div class='child red'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
</div>
</div>
Related
I want to use CSS to have a header part a the top and blue, yellow and green parts at the bottom but aligned from left to right, like the following image:
But I can't adjust Blue - Yellow - Green as I want.
I tried the following code:
.container {
width: 100%;
height: 300px;
display: flex;
flex-direction: column;
}
.header {
flex: 1;
background-color: brown;
}
.group {
flex: 5;
background-color: grey;
flex-direction: row;
}
.blue {
flex: 1;
background-color: blue;
}
.yellow {
flex: 3;
background-color: yellow;
}
.green {
flex: 1;
background-color: green;
}
<div class="container">
<div class="header">
<h3>header</h3>
</div>
<div class="group">
<div class="blue">
<h3>blue</h3>
</div>
<div class="yellow">
<h3>yellow</h3>
</div>
<div class="green">
<h3>green</h3>
</div>
</div>
</div>
If you want the lower row to contract and expand but not wrap, you could do this:
<html>
<head>
<style>
.container {
width: 100%;
height: 300px;
display: flex;
flex-direction: column;
}
.header {
display:inline-block;
flex: 1;
background-color: brown;
}
.group {
text-align:center;
flex: 5;
background-color: grey;
flex-direction: row;
}
.blue {
display:inline-block;
flex: 1;
width:33%;
background-color: blue;
}
.yellow {
display:inline-block;
flex: 3;
width:32%;
background-color: yellow;
}
.green {
display:inline-block;
flex: 1;
width:31%;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h3>header</h3>
</div>
<div class="group">
<div class="blue">
<h3>blue</h3>
</div>
<div class="yellow">
<h3>yellow</h3>
</div>
<div class="green">
<h3>green</h3>
</div>
</div>
</div>
</body>
</html>
I would like to have the parent (orange border) only grow to the size of the first child (grey background) and have the second child overflow vertically.
This is what I have:
This is what I want:
Codepen: https://codepen.io/gbucher/pen/wPGBpN
HTML:
<div class='parent'>
<div class='child1'>
</div>
<div class='child2'>
<div class='elem'>
A
</div>
<div class='elem'>
B
</div>
<div class='elem'>
C
</div>
<div class='elem'>
D
</div>
<div class='elem'>
E
</div>
</div>
</div>
CSS:
.parent {
border: 2px solid orange;
display: flex;
/* How to make it work without a fixed
height ?
height:60px;
*/
}
.child1 {
height: 60px;
width: 300px;
background: #888;
}
.child2 {
display: flex;
flex-direction: column;
overflow-y: auto;
}
.elem {
border: 1px solid black;
margin-top: -1px;
padding: 3px;
width: 10rem;
}
When computing the size of a parent, absolute positioned children are ignored.
The solution is thus to use a scroll wrapper around the second child. The wrapper should have position: relative and the scrolling child should have position: absolute.
.parent {
border: 2px solid orange;
display: flex;
}
.child1 {
height: 70px;
flex-grow: 1;
background: #888;
}
.child2 {
display: flex;
flex-direction: column;
position: absolute;
background: orange;
}
.scroll {
position: relative;
overflow-y: scroll;
overflow-x: hidden;
width: 323px;
background: green;
}
.elem {
border: 1px solid black;
margin-top: -1px;
padding: 3px;
width: 300px;
}
<div class='parent'>
<div class='child1'>
one
</div>
<div class='scroll'>
<div class='child2'>
<div class='elem'>
A
</div>
<div class='elem'>
B
</div>
<div class='elem'>
C
</div>
<div class='elem'>
D
</div>
<div class='elem'>
E
</div>
</div>
</div>
</div>
I have container with div elemenents
.container {
display: flex;
justify-content: space-between;
}
How to make one element positioned at the center on this block, and others to be space-between.
.container {
display: flex;
justify-content: space-between;
}
.container div {
height: 50px;
}
.one,
.four,
.seven {
background-color: red;
width: 200px;
}
.two,
.six {
background-color: green;
width: 100px;
}
.three,
.five {
background-color: yellow;
width: 150px;
}
.center {
width: 300px;
background-color: black;
}
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="center"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
<div class="seven"></div>
</div>
jsFiddle
Based on how dynamic you want this to be, here is a suggestion where the items on the left and on the right side of the center element are wrapped.
The left and right get 50% each minus the width of the center (150px for each side), which will put the center in the middle.
Updated fiddle
Stack snippet
.container {
display: flex;
justify-content: space-between;
}
.container div {
height: 50px;
}
.left, .right {
display: flex;
justify-content: space-between;
flex-basis: calc(50% - 150px);
}
.one,
.four,
.seven {
background-color: red;
flex-basis: 200px;
}
.two,
.six {
background-color: green;
flex-basis: 100px;
}
.three,
.five {
background-color: yellow;
flex-basis: 150px;
}
.center {
flex-basis: 300px;
background-color: black;
}
<div class="container">
<div class="left">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
</div>
<div class="center">
</div>
<div class="right">
<div class="four">
</div>
<div class="five">
</div>
<div class="six">
</div>
<div class="seven">
</div>
</div>
</div>
By adding a pseudo to each side wrapper, we can also make it behave similar to how space-between work without the wrappers (though still with center centered).
In this fiddle demo (and below Stack snippet) I changed the width's so one easier can see how it behaves in full screen.
.container {
display: flex;
justify-content: space-between;
}
.container div {
height: 50px;
}
.left, .right {
display: flex;
justify-content: space-between;
flex-basis: calc(50% - 100px);
}
.left::after,
.right::before {
content: '';
}
.one,
.four,
.seven {
background-color: red;
flex-basis: 125px;
}
.two,
.six {
background-color: green;
flex-basis: 25px;
}
.three,
.five {
background-color: yellow;
flex-basis: 75px;
}
.center {
flex-basis: 200px;
background-color: black;
}
<div class="container">
<div class="left">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
</div>
<div class="center">
</div>
<div class="right">
<div class="four">
</div>
<div class="five">
</div>
<div class="six">
</div>
<div class="seven">
</div>
</div>
</div>
I created a container (non-flex) and divided it into an upper half with 4 rows of fixed-height list items, and the bottom half of the box to fill whatever space was left over. Inside that bottom box, my intention is to style 4 child boxes to fit 2x2. I could probably separate them into 2 row containers each with 2 boxes and that would work but I think it can be done without adding any elements.
I can't figure out how to style the 4 boxes in 2x2 orientation within the lower flexbox, since it has no fixed height, meaning inner elements are difficult to define the height for. How can I do this with flexbox?
/* Menu / Primary Styles */
#Menu {
display: flex;
flex-direction: column;
height: 100vh;
position: absolute;
z-index: 100;
right: 0px;
top: 0px;
width: 3in;
background-color: green;
}
#Menu .item {
width: 100%;
color: white;
height: 0.3in;
background-color: #ff4343;
border-style: solid;
border-width: 0 0 0 0.032in;
border-color: #ff6c6c;
}
#Menu .item:nth-child(odd) {
background-color: #ff5454;
}
#Menu .bottom {
flex: 1;
flex-wrap: wrap;
display: flex;
flex-direction: row;
width: 100%;
background-color: blue;
}
#Menu .bottom .box {
flex: 1;
/* width:50%; */
background-color: #f3f3f3;
}
#Menu .bottom .box:nth-child(even) {
background-color: #eaeaea;
}
<div id="Menu">
<div class="top">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="bottom">
<div id="" class="box">1</div>
<div id="" class="box">2</div>
<div id="" class="box">3</div>
<div id="" class="box">4</div>
</div>
</div>
Target result:
Here is example :
#Menu {
display: flex;
flex-direction: column;
height: 100vh;
position: absolute;
z-index: 100;
right: 0px;
top: 0px;
width: 3in;
background-color: green;
}
#Menu .item {
width: 100%;
color: white;
height: 0.3in;
background-color: #ff4343;
border-style: solid;
border-width: 0 0 0 0.032in;
border-color: #ff6c6c;
}
#Menu .item:nth-child(odd) {
background-color: #ff5454;
}
#Menu .bottom {
flex: 1;
flex-wrap: wrap;
display: flex;
flex-direction: row;
width: 100%;
background-color: blue;
}
.box {
flex: 1;
flex-basis:50%;
/*width:50%;*/
background-color: #f3f3f3;
}
.bottom div:first-child, .bottom div:last-child
{
background-color: #eaeaea;
}
<div id="Menu">
<div class="top">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="bottom">
<div id="" class="box">1</div>
<div id="" class="box">2</div>
<div id="" class="box">3</div>
<div id="" class="box">4</div>
</div>
</div>
In .box added flex-basis:50% (This defines the default size of an element before the remaining space is distributed. The main-size value makes it match the width or height, depending on which is relevant based on the flex-direction.). But I have to change about set background-color for .box
Change your bottom box css rules as follows. I hope this will work for you
#Menu .bottom .box {
/*flex: 1;*/
width:50%;
background-color: #f3f3f3;
}
The main problem is flex: 1 and absence of width for the box. The solution is below, not sure about the grey backgrounds:
/* Menu / Primary Styles */
#Menu {
display: flex;
flex-direction: column;
height: 100vh;
position: absolute;
z-index: 100;
right: 0px;
top: 0px;
width: 3in;
background-color: green;
}
#Menu .item {
width: 100%;
color: white;
height: 0.3in;
background-color: #ff4343;
border-style: solid;
border-width: 0 0 0 0.032in;
border-color: #ff6c6c;
}
#Menu .item:nth-child(odd) {
background-color: #ff5454;
}
#Menu .bottom {
flex: 1;
flex-wrap: wrap;
display: flex;
flex-direction: row;
width: 100%;
background-color: blue;
}
#Menu .bottom .box {
background-color: #f3f3f3;
width: 50%;
}
#Menu .bottom .box:nth-child(even) {
background-color: #eaeaea;
}
<div id="Menu">
<div class="top">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="bottom">
<div id="" class="box">1</div>
<div id="" class="box">2</div>
<div id="" class="box">3</div>
<div id="" class="box">4</div>
</div>
</div>
I hope this will help you out. It might not be the size you want but its a 2x2 flexbox. Maybe you could change the css to fit it as you want it.
.flex-grid {
display: flex;
flex-wrap: wrap;
height: 500px;
}
.grid-item {
flex: 1 1 calc(100% - 50px);
background: #F90;
border-top: solid 1px #000;
}
.grid-item:nth-child(odd) {
background: #F00;
flex: 0 0 50px;
}
<div class="flex-grid">
<div class="grid-item">
A1
</div>
<div class="grid-item">
B1
</div>
<div class="grid-item">
A2
</div>
<div class="grid-item">
B2
</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>