I have to write some grid fallback for IE11.
I want Item 4 to be placed on the lower right so Item 1 can stretch all the way down to the bottom?
I think this is impossible with flexbox, right? : https://jsfiddle.net/b7w0pc4q/4/
<div class="flexContainer">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
The SCSS:
.flexContainer {
display: flex;
background-color: #223;
min-height: 100vh;
flex-wrap: wrap;
.item {
border: solid 1px red;
padding: 20px;
&:nth-child(1) {
width: 50%;
align-self: stretch;
background-color: #a69eff;
}
&:nth-child(2), &:nth-child(3) {
width: 25%;
background-color: #ffb76f;
align-self: flex-start;
}
&:nth-child(4) {
background-color: #ffee80;
width: 51%;
margin-left: auto;
}
}
}
With a classic float layout it's fairly easy: https://codepen.io/Sepp/pen/MXBrzy?editors=1100 But I don't want to give up yet. any ideas?
So I conclude: It is not possible with flexbox without altering the html markup.
Thanks guys.
Related
.container {
width: 400px;
border: 2px solid red;
display: flex;
flex-flow: row wrap;
}
.item {
padding: 20px;
border: 1px solid blue;
width: 70px;
}
<div class="container">
<div class=item>Box 1</div>
<div class=item>Box 2</div>
<div class=item>Box 3</div>
<div class=item>Box 4</div>
<div class=item>Box 5</div>
</div>
My question, how can "Box 1", "Box 2", "Box 3" use the full width of the "container" class? and "Box 4" and "Box 5" will line up from below to the above box "Box 1" and "Box 2".
You have several ways to go about it; here are two ways:
Use flex-grow. If you add flex-grow: 1 to the item selector then the boxes on each row will take up the full width of the container. Note: With this solution you may want to make sure you have the same number of boxes per row, if you want these boxes to appear as a uniform grid. Otherwise the line with only one or two boxes will be stretched to fill the width of the container. So keep that in mind.
.container {
width: 400px;
border: 2px solid red;
display: flex;
flex-flow: row wrap;
}
.item {
padding: 20px;
border: 1px solid blue;
width: 70px;
flex-grow: 1;
}
Second option: Add margin: 0 auto; to the item selector, and they will fill the width by centering.
.container {
width: 400px;
border: 2px solid red;
display: flex;
flex-flow: row wrap;
}
.item {
padding: 20px;
border: 1px solid blue;
width: 70px;
margin: 0 auto;
}
This was actually kind of a brainteaser until I realized you need CSS grid instead of Flexbox :). There doesn't seem to exist a solution with Flexbox without adding "ghost divs", which isn't really a good option.
.container {
width: 400px;
border: 2px solid red;
display: grid;
grid-template-columns: 110px 110px 110px;
justify-content: space-between;
}
.item {
padding: 20px;
border: 1px solid blue;
}
<div class="container">
<div class=item>Box 1</div>
<div class=item>Box 2</div>
<div class=item>Box 3</div>
<div class=item>Box 4</div>
<div class=item>Box 5</div>
</div>
I am using a flex grid to lay out information. I want to highlight one of the cells within the grid so that it stands out to users by adjusting the height of the respective cell. However, my attempts have not gotten far as adjusting the properties of once cell will thereby affect the surrounding cells.
In my fiddle below, I have a class .highlighted within .flexbox-2 that I would like to change. Basically, the row 1 of the second column would have a taller height than the first and third column, but all the borders will still be aligned. I was thinking to apply position: absolute and change its CSS there, but this does not prove fruitful. I'm wondering if there are other routes I can take.
Check this jsfiddle
Code:
* {
box-sizing: border-box;
}
body {
font-family: helvetica, serif;
}
.container {
display: -webkit-flex;
-webkit-flex-direction: row;
}
.flex {
display: flex;
flex-direction: column;
}
.flex-row {
flex: 1;
border: 1px solid;
}
.flexbox-1 {
-webkit-flex: 1;
border: solid 3px red;
}
.flexbox-2 {
-webkit-flex: 1;
border: solid 3px green;
height: 200px;
margin-left: 10px;
position: relative;
}
.highlighted {
position: absolute;
border: 1px solid yellow;
padding-top: 20px;
}
.flexbox-3 {
-webkit-flex: 1;
border: solid 3px blue;
height: 200px;
margin-left: 10px;
}
<div class="container">
<div class="flex flexbox-1">
<div class="flex-row">row 1</div>
<div class="flex-row">row 2</div>
<div class="flex-row">row 3</div>
</div>
<div class="flex flexbox-2">
<div class="flex-row highlighted">row 1</div>
<div class="flex-row">row 2</div>
<div class="flex-row">row 3</div>
</div>
<div class="flex flexbox-3">
<div class="flex-row">row 1</div>
<div class="flex-row">row 2</div>
<div class="flex-row">row 3</div>
</div>
</div>
If you want that first row to stick out above the other two columns, you could use a negative margin-top:
.highlighted {
border: 1px solid yellow;
margin-top: -10px;
padding-bottom: 10px;
}
Working Example
Need to split all tabs in such a way that. Last tab width will be 50% width and rest all tabs must fit in 50%. For now I gave fixed width: 16.65%. Would like to avoid it as there could 2 or 3 tabs excluding last tab.
Can this be achieved using display: flex ?
* {
margin: 0;
}
.wrapper {
overflow: hidden
}
.wrapper .tab {
float: left;
width: 16.65%;
text-align: center;
background: #ccc;
}
.wrapper .last-tab {
width: 50%;
background: #999
}
<div class="wrapper">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
<div class="tab last-tab">Last Tab</div>
</div>
You can do it like this:
* {
margin: 0;
}
.wrapper {
display: flex; /* displays children inline */
overflow: hidden;
}
.wrapper > .tab {
flex: 1; /* enables growing of flex-items so they can fill flex-containers width / this is the shorthand way, but you can also use: flex: 1 1 auto; (i.e. flex-grow, flex-shrink, flex-basis) */
/*float: left;*/
/*width: 16.65%;*/
text-align: center;
background: #ccc;
}
.wrapper > .last-tab {
/*width: 50%;*/
flex: 0 1 50%; /* adjusted to take half of the wrappers width (i.e. initial width is set to 50%) */
background: #999;
}
<div class="wrapper">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
<div class="tab last-tab">Last Tab</div>
</div>
If you want to do it pure flexbox way without the use of the width property.
try this
* {
margin: 0;
}
.wrapper {
overflow: hidden;
display: flex;
width: 100%;
}
.wrapper .tab {
width: calc(50%/3);
text-align: center;
background: #ccc;
}
.wrapper .last-tab {
width: 50%;
background: #999
}
<div class="wrapper">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
<div class="tab last-tab">Last Tab</div>
</div>
Take 2 blocks of 50-50%. Then you can easily divide inner divs as per your requirement.
Hope this helps you :)
* {
margin: 0;
}
.wrapper {
/*overflow: hidden*/
display:flex;
}
.wrapper .tab-container {
/*float: left;*/
display:flex;
width: 50%;
background: #ccc;
}
.wrapper .tab {
/*float: left;*/
display:flex;
width: 33.33%;
text-align: center;
}
.wrapper .last-tab {
width: 50%;
background: #999;
text-align: center;
}
<div class="wrapper">
<div class="tab-container">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
</div>
<div class="last-tab">Last Tab</div>
</div>
I would like to have three separate vertical columns, is there a way I can change my code to make the columns vertical instead of horizontal (like they are now).
.cols {
font-weight: bold;
min-height: 50%;
min-width: 90%;
background: #000000;
margin-bottom: 15px;
display: table;
table-layout: fixed;
}
.cols div {
position: relative;
background: #232323;
}
.col {
display: table-cell;
}
<div class="cols">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
Currently I have three horizontal boxes stretching across an outside container, I would like the three boxes to be evenly set out in vertical columns, if that makes sense.
If I understand what you mean, this can be done using flex:
.cols {
min-height: 50%;
min-width: 90%;
background: #000000;
margin-bottom: 15px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.cols div {
background: #232323;
color: #fff;
}
<div class="cols">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
I'm displaying a list of same sized items in a flex div. I've aligned them to the left. However I'd like the list to be centred as a whole. Any suggestions about how to do this?
Please try to snipped below.
$('button').click(function(){
$('.list').toggleClass('hack')
});
.item {
width: 40px;
height: 40px;
background-color: skyblue;
border: 1px solid black;
}
.list-container {
width: 100px;
background-color: grey;
flex-direction: row;
display: flex;
}
.spacer {
flex: 1;
}
.list.hack {
width: 84px;
}
.list {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='list-container'>
<div class='spacer'></div>
<div class='list'>
<div class='item'></div><div class='item'></div>
<div class='item'></div><div class='item'></div>
<div class='item'></div>
</div>
<div class='spacer'></div>
</div>
<button>Toggle fixed list width (hack)</button>
I believe the best way is to insert the "item" elements to a new div, setting:
<div style="margin:0 auto;width: 85px;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
and also applying .item{float:left;}
It's not enough when you set justify-content: center; to .list?
Then if you need to make the standalone item to be aligned to left, you can set its margin-right: 42px; (to compensate the space next to it)
You can do the same without using flex
HTML
<div class='list'>
<div class='item'>item 1</div><div class='item'>item 2</div>
<div class='item'>item 3</div><div class='item'>item 4</div>
<div class='item'>item 5</div>
</div>
CSS
.list{
display:inline-block;
background-color: grey;
width:100px;
clear:both;
justify-content: center;
}
.list .item{
float:left;
width:48%;
background-color: skyblue;
height: 40px;
border: 1px solid black;
}
.list .item:last-child{
margin-left:25%;
}
Click here for JSFiddle sample