I'm trying to create this: http://imgur.com/G2TpjDR
What I have: https://jsfiddle.net/tzayffsv/
I use flexbox with params: flex-direction: column, flex-wrap: wrap. The Problem is that items going outside the screen when wrapping... Any ideas how to do this using flexbox (or mbe other ideas)? I don't look for solutions with javascript and positioning items as absolute..
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
This works. flex-flow: column wrap-reverse;
.box {
height:200px;
width:300px;
background:grey;
display: flex;
flex-flow: column wrap-reverse;
justify-content: center;
align-content: flex-start;
align-items: flex-end;
}
.item {
flex: 0 1 auto;
align-self: auto;
min-width: 0;
min-height: 40%;
border:1px solid black;
}
<div class="box">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
This is not directly related to flexbox, you only need to set the direction of the text to be right-to-left. This can be easily achieved with
.container {
direction: rtl;
}
.container {
direction: rtl;
display: flex;
flex-direction: column;
flex-wrap: wrap;
position: absolute;
top: 0;
right: 50px;
height: 600px;
}
.item {
width: 200px;
height: 140px;
line-height: 60px;
background-color: #618ae4;
margin-top: 10px;
margin-left: 10px;
text-align: center;
font-weight: bold;
font-size: 30px;
color: #fff;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
Related
I'm trying to get my content to display like this
picture
But mine shows up like this picture
How do I make it so one row has 3 columns, the second one has 4 and the last has 3? with flexbox? Thank you
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
background-color: white;
align-items:baseline;
width: 60em;
margin: auto;
padding: .5em;
justify-content: space-between;
}
.flex-container div {
flex: 1 0 30%;
margin: .5em 0;
text-align: center;
line-height: 1.5em;
font-size: 1em;
border: 0.1em solid black;
padding: 5px;
box-sizing: border-box;
justify-content: space-between;
}
You can accomplish this by placing the cells into rows which themselves are stacked using flex-direction: column.
The styling is crude, but try something like this:
.outer {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.cell {
margin: 1.0em;
padding: 1.0em;
border: 1px solid black;
flex-grow: 1;
}
<div class="outer">
<div class="row">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
</div>
<div class="row">
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
<div class="cell">Cell 5</div>
<div class="cell">Cell 6</div>
</div>
<div class="row">
<div class="cell">Cell 7</div>
<div class="cell">Cell 8</div>
<div class="cell">Cell 9</div>
</div>
</div>
I want to display items in reverse order horizontally with left alignment
here is my working fiddle, but items are aligned to right.
#main {
width: 400px;
height: 400px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
}
#main div {
width: 50px;
height: 50px;
}
<div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
can someone help me, thanks in advance.
You need to specify justify-content: flex-end;
#main {
width: 400px;
height: 400px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
justify-content: flex-end;
}
#main div {
width: 50px;
height: 50px;
}
<div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
I want to achieve the following scenario with flexbox
the green element is a text element and the width is flexible. The blue elements should have 100% of the remaining width beside the green element.
My current solution looks like this:
<div class="container">
<span class="title">title</span>
<div class="fullwidth"></div>
<div class="fullwidth"></div>
<div class="fullwidth"></div>
</div>
and the css:
.container {
display: flex;
align-items: center;
flex-wrap: wrap;
background-color: #EAEBEF;
.title {
padding: 20px;
background-color: #48CFAE;
}
.fullwidth {
background-color: #87BDFF;
flex: 0 0 100%;
height: 60px;
margin: 10px 0;
}
}
But it looks currently like this
here is a codepen example
Without changing the HTML this can be managed with CSS-Grid as an alternative to flexbox.
.container {
display: grid;
grid-template-columns: max-content 1fr;
grid-gap: 1em;
background-color: #EAEBEF;
margin-bottom: 1em;
}
.title {
padding: 10px;
grid-row: 2;
background-color: #48CFAE;
}
.fullwidth {
grid-column: 2;
background-color: #87BDFF;
height: 40px;
}
<div class="container">
<div class="title">title</div>
<div class="fullwidth"></div>
<div class="fullwidth"></div>
<div class="fullwidth"></div>
</div>
<div class="container">
<div class="title">Longer title</div>
<div class="fullwidth"></div>
<div class="fullwidth"></div>
<div class="fullwidth"></div>
</div>
Try this HTML and CSS markup. Basically You need to keep the left side in one div and the right side elements in another div.
.container {
display: flex;
align-items: center;
flex-wrap: nowrap;
background-color: #eaebef;
}
.container .title {
padding: 20px;
background-color: #48cfae;
}
.container .div1 {
width: 20%;
}
.container .div2 {
width: 80%;
}
.container .fullwidth {
background-color: #87bdff;
height: 60px;
margin: 10px 0;
}
<div class="container">
<div class="div1">
<span class="title">title</span>
</div>
<div class="div2">
<div class="fullwidth"></div>
<div class="fullwidth"></div>
<div class="fullwidth"></div>
</div>
</div>
See code below:
You have to warp fullwidth in div and set width to this div
also set width and margin to title
.container {
display: flex;
align-items: center;
flex-wrap: wrap;
background-color: #EAEBEF;
}
.title {
width: 20%;
padding: 20px;
background-color: #48CFAE;
margin-left: 15px;
}
.fullwidth {
background-color: #87BDFF;
flex: 0 0 100%;
height: 60px;
margin: 10px 0;
}
.a{
margin: 50px;
width: 50%;
}
<div class="container">
<span class="title">title</span>
<div class="a">
<div class="fullwidth"></div>
<div class="fullwidth"></div>
<div class="fullwidth"></div>
</div>
</div>
If you want to achive this without change your html but only your less, try this:
.container {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
background-color: #EAEBEF;
justify-content: flex-end;
.title {
padding: 20px;
background-color: #48CFAE;
margin-right: 20px;
flex-grow: 1
}
.fullwidth {
background-color: #87BDFF;
height: 60px;
margin: 10px 0;
width: 80%;
}
}
your codepen edited
I am trying to recreate the following layout with flexbox:
I am almost there layout wise, but I am getting some weird flex-wrap behaviour like this:
My css is as follows:
.parent {
display: flex;
justify-content: space-between;
.square-container {
width: calc(33% - 1.333px);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
&:before {
content:'';
float:left;
padding-top:100%;
}
.small-square {
width: calc(50% - 2px);
height: calc(50% - 2px);
background: red;
flex-shrink: 0;
}
}
}
The html is as follows:
<div class="parent">
<div class="square-container">
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
</div>
<div class="square-container">
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
</div>
<div class="large-square"></div>
</div>
I feel that I am missing some important flexbox property here. Thank you for your help!
You can do it quite easily:
.flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 210px;
justify-content: space-between;
width: 650px;
}
.small {
width: 100px;
height: 100px;
background: red;
}
.large {
width: 210px;
height: 210px;
background: red;
}
<div class="flex">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="large"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
</div>
Update
Fully responsive with current html:
.parent {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.parent:after {
content: '';
display: block;
width: 0;
background: blue;
padding-top: 33.3333%;
}
.square-container {
width: calc(33.33333% - 5px);
flex-grow: 1;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
.small-square {
width: calc(50% - 5px);
height: calc(50% - 10px);
background: red;
}
.large-square {
margin: 0 10px 10px 10px;
flex-grow: 1;
width: 33.33333%;
background: red;
order: 2;
}
.square-container:first-child {
order: 1;
}
.square-container:nth-child(2n) {
order: 3;
}
<div class="parent">
<div class="square-container">
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
</div>
<div class="square-container">
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
</div>
<div class="large-square"></div>
</div>
No changes to the HTML:
.parent {
display: flex;
}
.square-container {
flex: 1;
display: flex;
justify-content: space-around;
align-content: space-between;
flex-wrap: wrap;
}
.small-square {
flex: 0 0 45%;
height: 100px;
background-color: red;
}
.large-square {
flex: 1;
height: 210px;
margin: 0 5px;
background-color: red;
}
.square-container:nth-child(2) {
order: 1;
}
<div class="parent">
<div class="square-container">
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
</div>
<div class="square-container">
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
</div>
<div class="large-square"></div>
</div>
jsFiddle
I'm trying to display nested flexboxes in order to get an effect similar to cell merging in Excel. I got the nested cells to show up, but I can't get the margins displaying correctly: I want to have all the margins visible, not just between the main columns. Fiddle here --> http://jsfiddle.net/bedhvee4/1/
<div class="flex-container">
<div class="flex-item" style="-ms-flex: 4; flex: 4;">
<div class="flex-container">
<div class="flex-item" style="flex: 0 0 100%">Column A</div>
<div class="flex-item">11</div>
<div class="flex-item">12</div>
<div class="flex-item">13</div>
<div class="flex-item">14</div>
</div>
<div class="flex-container">
<div class="flex-item">21</div>
<div class="flex-item">22</div>
<div class="flex-item">23</div>
<div class="flex-item">24</div>
</div>
</div>
<div class="flex-item" style="-ms-flex: 3; flex: 3;">
<div class="flex-container">
<div class="flex-item" style="flex: 0 0 100%">Column B</div>
<div class="flex-item">16</div>
<div class="flex-item">17</div>
<div class="flex-item">18</div>
</div>
<div class="flex-container">
<div class="flex-item">26</div>
<div class="flex-item">27</div>
<div class="flex-item">28</div>
</div>
</div>
</div>
.flex-container {
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
justify-content: space-around;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
margin: 2px;
color: white;
font-weight: bold;
font-size: 2.5vw;
text-align: center;
flex: 1 0 0px;
white-space: nowrap;
overflow: hidden;
}
I am not really 100% sure what you are looking for but I did change a few colors and the order in which you have the divs nested and the margins seem to be working properly. Here is the jsfiddle
http://jsfiddle.net/bedhvee4/6/
.flex-container {
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
justify-content: space-around;
flex-wrap: wrap;
background: tomato;
}
.flex-item {
padding: 10px;
margin: 5px;
background: blue;
color: white;
font-weight: bold;
font-size: 2.5vw;
text-align: center;
flex: 1 0 0px;
white-space: nowrap;
overflow: hidden;
border: 1px solid white;
}