I have a flex container, and some divs inside of it. Each div has some content inside of it, that set the width of this div. between each of the divs, I want to put a responsive separator-div.
I've tried to give the max-width property for each of the responsive class in the code below, but it not rendering.
I cannot give the inner-wrapper's a fixed width, because it depends on the width of the inner{#}.
<div class='main'>
<div class='item-wrapper'>
<div class='inner1'></div>
<div class='responsive'></div>
</div>
<div class='item-wrapper'>
<div class='inner2'></div>
<div class='responsive'></div>
</div>
<div class='item-wrapper'>
<div class='inner3'></div>
<div class='responsive'></div>
</div>
</div>
.main{
width:100%;
display:flex;
height:40px;
background:yellow;
}
.responsive{
max-width:200px;
}
.item-wrapper{
display:flex;
height:100%;
background:green;
}
to summarize, i expect:
div1 -------------- div2 --------------- div3
such that only the width of the '------' will increase/decrease if i resizing my screen
You can do it like this by adding a rule to your flexbox container:
myContainer{
//other properties
justify-content:space-between;
}
You do need that much of markup
example
.main {
width: 100%;
display: flex;
height: 40px;
background: yellow;
justify-content: space-between;
/* new */
}
.responsive {
flex: 1;
/* new */
max-width: 200px;
margin: auto;
/* new */
border-top: dotted;
/* new */
}
.main>div:not([class]) {
background: green;
display: flex;
align-items: center;
/* new */
}
<div class='main'>
<div>inner 1</div>
<div class='responsive'></div>
<div>inner 2</div>
<div class='responsive'></div>
<div>inner 3</div>
</div>
If you have a only 3 elements, then 2 pseudos can become the seperator via order:
.main {
width: 100%;
display: flex;
height: 40px;
background: yellow;
justify-content: space-between;
}
.main::before,
.main::after {
content: '';
flex: 1;
max-width: 200px;
margin: auto;
border-top: dotted;
}
.main>div:not([class]) {
background: green;
display: flex;
align-items: center;
}
.main>div:first-child {
order: -1
}
.main>div:last-child {
order: 1
}
<div class='main'>
<div>inner 1</div>
<div>inner 2</div>
<div>inner 3</div>
</div>
more about flex : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
Looking at the bellow code, I'm trying to have the 3 child columns as follow:
The first column should be 100% wide and above two other columns.
Two other columns should be bellow the first column and each 50% wide.
Like this:
.flex-container {
width: 80%;
min-height: 300px;
margin: 0 auto;
display: flex;
}
.flex-container .column {
padding: 10px;
background: #dbdfe5;
flex: 1;
}
.column.first {
background: blueviolet;
}
.column.third {
background: #b4bac0;
}
<div class="flex-container">
<div class="column first">Column 1</div>
<div class="column second">Column 2</div>
<div class="column third">Column 3</div>
</div>
But whatever I try it doesn't work that way.
Is it possible or I'm trying an impossible layout?
Flexbox version
You can use flex-wrap: wrap on the container to make children that overflow go below, and use flex-basis: 100% on the first child and flex-basis: 50% on the 2 others.
I have also added box-sizing: border-box on the children, to avoid border or padding count in the percentage.
.flex-container {
width: 80%;
min-height: 300px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.flex-container .column {
padding: 10px;
background: #dbdfe5;
box-sizing: border-box;
}
.column.first {
background: blueviolet;
flex-basis: 100%;
}
.column.second {
flex-basis: 50%;
}
.column.third {
background: #b4bac0;
flex-basis: 50%;
}
<div class="flex-container">
<div class="column first">Column 1</div>
<div class="column second">Column 2</div>
<div class="column third">Column 3</div>
</div>
Grid version
The grid version is even simpler, you only need display: grid on the container, and grid-column: 1 / 3 on the first child.
.flex-container {
width: 80%;
min-height: 300px;
margin: 0 auto;
display: grid;
}
.flex-container .column {
padding: 10px;
background: #dbdfe5;
}
.column.first {
background: blueviolet;
grid-column: 1 / 3;
}
.column.third {
background: #b4bac0;
}
<div class="flex-container">
<div class="column first">Column 1</div>
<div class="column second">Column 2</div>
<div class="column third">Column 3</div>
</div>
There is container:
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
</div>
Block class="container" has height of screen height.
How to make the same height for block1, block2? so that they occupy the entire height of the parent?
I have tried flex
grid can help you here without even setting an height which can be optionnal , mind box-sizing if height, borders and paddings are involved:
.container {
display: grid;
grid-template-rows: repeat(2, 1fr);/* the keyword for the value : 1fr */
}
.container>div {
border: solid;
}
<div class="container">
<div class="block1">give<br>me<br>some<br>heights</div>
<div class="block2"></div>
</div>
usefull link to know more about it https://css-tricks.com/snippets/css/complete-guide-grid/
flex would be for te browser's height:
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.container>div {
flex: 1;
border: solid;
margin: 2px;
/* possible*/
}
/* reset */
body {
margin: 0;
height: 100vh;
}
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
</div>
You can use flex to get this done. You could also use float and set the height of the blocks to 100% and the widths of them to 50%.
.container {
height: 100vh;
display: flex;
flex-direction: column;
border: 4px red solid;
}
.block1, .block2 {
height: 50%;
}
.block1 {
border: 4px green solid;
}
.block2 {
border: 4px blue solid;
}
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
</div>
How can I align two div's with different classes together above another?
If I have the following code:
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
how can I align div1 and div3 next to each other? and above the div1? Is it possible only with html and css?
thanks in advance
Wrap them with a flexbox container, and change the order of the elements:
.container {
display: flex;
flex-wrap: wrap;
}
.container > div {
line-height: 40px;
text-align: center;
}
.div1 {
order: 1;
width: 50%;
background: red;
}
.div2 {
order: 3;
width: 100%;
background: blue;
}
.div3 {
order: 2;
width: 50%;
background: yellow;
}
<div class="container">
<div class="div1">
1
</div>
<div class="div2">
2
</div>
<div class="div3">
3
</div>
</div>
Can't you just place all the div's in a container that is 100% width and do a text-align: center?
Simple jFiddle for you.
.container {
width:100%;
text-align:center;
}
I have a vertically central adaptable scrollable flexbox element, which itself should have two columns (I solved this with two child-divs). The central flexbox should have a frame and a central divider line.
I can't get the central divider line to run all the way to the bottom of the scrollable flexbox. I tried it with a third child div element but the line only appears for the vertical extent of the flexbox.
How can I make two columns in a scrollable flexbox with a frame and central divider line running all the way to the bottom?
Thank you for your help.
Here is the example:
https://jsfiddle.net/soliman/0d0tn22x/2/
<body>
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<div class="leftContent"> Column 1
With a lot of lines.
</div>
<div class="divider"></div>
<div class="rightContent"> Column 2
With fewer lines
</div>
</div>
<div class="footer">
Footer
</div>
</div>
</body>
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
background: black;
color: red;
}
.wrapper {
display: flex;
/* use the flex model */
height: 100%;
flex-direction: column;
}
.header {
margin: 1em 1em 0 1em;
}
.content {
flex: 1 1 auto;
display: flex;
overflow-y: auto;
position: relative;
min-height: 100px;
margin: 0 1em 0 1em;
border: 6px double red;
}
.content > div {
width: 50%;
padding: 3%;
}
.content > div:first-child {
margin-right: 10px;
}
.footer {
margin: 0 1em 1em 1em;
}
.divider {
position: absolute;
left: 50%;
top: 0%;
bottom: 0%;
border-left: 6px double red;
}
Try this mixed flexbox and CSS table layout. You can set the content area as a table, and the three columns as table cells, so they always be equal height.
There is one issue with the approach is - it only works properly if the content is taller than the container, otherwise the vertical line will stop in the middle. See the other approach at the bottom.
jsFiddle
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
overflow-y: auto;
min-height: 100px;
border: 1px solid;
}
.wrapContent {
display: table;
width: 100%;
}
.wrapContent > div {
display: table-cell;
}
.leftContent,
.rightContent {
width: 50%;
}
.divider {
border-left: 1px solid;
}
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<div class="wrapContent">
<div class="leftContent">
<div style="height:500px;">Left</div>
</div>
<div class="divider"></div>
<div class="rightContent">
<div style="height:auto;">Right</div>
</div>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
Another way would be using background image for the vertical line, set that to the center of the content container, with repeat-y, the image can be just a square dot. It works well even if the content is shorter than the container.
jsFiddle
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
overflow-y: auto;
min-height: 100px;
border: 1px solid;
background: url("http://i.imgur.com/oyQ4xsL.png") center top repeat-y;
background-size: 1px;
}
.leftContent,
.rightContent {
width: 50%;
}
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<div class="leftContent">
<div style="height:500px;">left</div>
</div>
<div class="rightContent">
<div style="height:auto;">right</div>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
Is it possible to use flexbox to have a div that will fill the entire remaining area (using flex-grow: 1) and have its' child div dimensions in percentages?
I tried:
<div style="height:700px; width 100%; display:flex; flex-direction: column; background-color:red;">
<div>Hello Plunker!</div>
<div style="background-color:green; flex-grow:1;">
<div style="background-color: blue; height:70%; width:70%;"></div>
</div>
</div>
Is flexbox the right way to achieve this?
Yes, it's entirely possible as mentioned in this question
You just need to specific a height of 100% for the child (holding the grandchild element)
JSfiddle Demo
.child {
background-color:green;
flex-grow:1;
height: 100%;
}
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.parent {
height: 100%;
display: flex;
flex-direction: column;
background-color: rgba(255, 0, 0, 0.5);
}
.child {
background-color: green;
flex-grow: 1;
height: 100%;
}
.g-child {
background: blue;
height: 70%;
width:70%;
}
<div class="parent">
<div>Hello Plunker!</div>
<div class="child">
<div class="g-child"></div>
</div>
</div>
Needed to set the parent div as 'position:relative;' and the child as 'position:absolute;'
<div style="height:700px; width 100%; display:flex; flex-direction: column; background-color:red;">
<div>Hello Plunker!</div>
<div style="background-color:green; flex-grow:1; position:relative;">
<div style="background-color: blue; position:absolute; height:100%; width:100%;"></div>
</div>
</div>