I'm just trying the FlexLayout for different screen sizes.
The 3 boxes/divs below should be side to side on a large display, if it shrinks they should be above each other. But my top div is outside of my window and I don't want that.. How can I fix that?
<div class="container" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="space-around center">
<div class="asd" [style.background-color]="'black'"></div>
<div class="asd" [style.background-color]="'green'"></div>
<div class="asd" [style.background-color]="'blue'"></div>
</div>
.asd {
min-height: 500px;
min-width: 400px;
}
.container {
height: 100%;
}
Flex elements won't stack unless you use flex-wrap: wrap along with a min-width or flex-basis declaration.
Basically, if the number of flex elements in the row would need to be smaller than their min-width they'll wrap to the next line.
.flexContainer {
display:flex;
max-width: 80%;
margin: 20px;
justify-content: space-between;
flex-wrap: wrap;
}
.flexItem {
background: #dddddd;
padding: 20px;
min-width: 200px;
margin: 0 10px 10px 0;
}
<div class="flexContainer">
<div class="flexItem">Flex</div>
<div class="flexItem">Flex</div>
<div class="flexItem">Flex</div>
<div class="flexItem">Flex</div>
</div>
Related
I am trying to fill the remaining space of a containing flex box with the green div. I want the top flex row (blue) to only be the height of its contents and then the row below (green) to fill the rest. For some reason it just seems to split the flex rows evenly down the div. I have read a few questions on here already which all say to make sure the containing div has its height set to 100%. I have set the containing div height to 200px as this is my desired height, but I have also tried adding another container within this to 100% to no avail. I've also made sure to set the flex-grow property on the second row to 1. Every time I think I'm beginning to understand flex it throws another curve ball and it's driving me up the wall. Please help! Thank you.
P.S. for some reason the HTML code snippet below refuses to include the first line of my html but it is contained in the following div: <div class="rmCtrlList_item"
.rmCtrlList_item {
width: 80vw;
margin: 3vw 8.5vw;
height: 200px;
background-color: $primary-color;
border-radius: 10px;
padding: 5px;
display: flex;
flex-flow: row;
flex-wrap: wrap;
// ROWS
&_row {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#row-1 {
//max-height: 20px;
background-color: blue;
}
#row-2 {
flex-grow: 1;
align-items: center;
justify-content: center;
background-color: green;
}
// COLUMNS
&_col {
text-align: left;
flex-direction: column;
}
#col-1b {
flex-grow: 1;
}
}
<div class="rmCtrlList_item">
<div class="rmCtrlList_item_row" id="row-1">
<div class="rmCtrlList_item_col" id="col-1a">
<i class="icon__panel-2 fas fa-lightbulb"></i>
</div>
<div class="rmCtrlList_item_col" id="col-1b">
<a href="lights.html">
<h1 class="panel__title">Lights</h1>
</a>
</div>
<div class="rmCtrlList_item_col" id="col-1c">
<i class="icon__enlarge fas fa-plus-circle"></i>
</div>
</div>
<div class="rmCtrlList_item_row" id="row-2">
div to fill remaining space
</div>
</div>
how about to use flex-direction and below code what I used? green will fill ramaining space automatically, if you use its height's 100%
.container{
display: flex;
flex-direction: column;
width: 200px;
height: 300px;
border: 1px solid black;
}
.blue{
width: 100%;
height: 90px; /*change only blue's height size, green will be filled automatically*/
background: blue;
}
.green{
width: 100%;
height: 100%;
background: green;
}
<div class="container">
<div class="blue"></div>
<div class="green"></div>
</div>
I have a horizontal slider(scrollable) on my page, which contains list of sub-cards. The below code snippet works perfectly fine.
JSFiddle-1: https://jsfiddle.net/28rnwpqk/
I now want to display different sized cards, which are dynamic. I made following change to my container css, so as to stack multiple cards in same column if space exists.
.container {
...
flex-direction: column;
flex-wrap: wrap;
...
}
JSFiddle-2: https://jsfiddle.net/k60zLg74/
This results in the parent container width being set only to width of first slider item, bcz of flex-direction: column property. As such the background color, slider scroll has stopped working. What is the correct way to achieve this without impacting width of container. My main requirement is to have flex items stacked vertically if space exists and size of cards is not know upfront.
CSS grid can do this better:
.viewport {
width: 600px;
height: 200px;
overflow-x: hidden;
}
.container {
display: inline-grid;
background-color: DodgerBlue;
grid-auto-flow:column;
grid-template-rows:1fr 1fr;
grid-auto-columns:130px;
gap: 10px;
height: 100%;
min-width:100%;
}
.item {
box-sizing: border-box;
background-color: #f1f1f1;
padding: 20px;
margin: 10px;
font-size: 30px;
grid-row:span 2;
}
.item.small {
grid-row:span 1;
}
<div class="viewport">
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item small">3</div>
<div class="item small">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
</div>
Your width: max_content; setting is restricting the width of your container. Remove that property, and your full container will have a blue background as expected:
.container {
display: flex;
background-color: DodgerBlue;
flex-direction: column;
flex-wrap: wrap;
gap: 10px;
height: 200px;
}
I switched from display:grid; to display:flexbox; because of design options for my three columns.
I want my columns to look as the following:
Desktop Viewport:
3 columns next to each other.
Tablet Viewport:
2 columns on the 1st row and 1 on the 2nd row (in the center of the 2nd row) to resemble a Y shape.
Mobile Viewport:
All 3 columns go under each other in 3 rows.
Problem is:
flex-flow: column wrap won't put my elements in columns and stays in rows.
.grid-container {
display: flex;
margin: 100px 100px;
width: 400px;
height: 800px;
flex-flow: column wrap;
}
.grid-container .column {
background-color: #9c1f0a;
text-align: center;
padding: 20px 0;
font-size: 30px;
border-radius: 20px;
}
<div class="grid-container">
<div id="left" class="column">
<span>COLUMN1</span>
</div>
<div id="center" class="column">
<span>COLUMN2</span>
</div>
<div id="right" class="column">
<span>COLUMN3</span>
</div>
</div>
I have made some changes in your code.
First of all remove the width and height from the container. Also, remove the flex-flow property. Now add flex-wrap: wrap, because of this property it will wrap the items on the new line. Also add justify-content: center this will enable elements to centered aligned across the horizontal axis.
I have also added flex: 0 0 200, which means the item won't grow and shrink and will always have a width: 200px.
If you wish to change the width you can assign different flex property to each item, instead of 200px you can write different values, let's say this way:
#left {
flex: 0 0 100px;
}
#center {
flex: 0 0 200px;
}
#right {
flex: 0 0 300px;
}
I believe this is what you are looking for:
.container {
display: flex;
margin: 0 auto;
flex-wrap: wrap;
justify-content: center;
}
.container .column {
background-color: #9c1f0a;
text-align: center;
padding: 20px 0;
font-size: 1rem;
border-radius: 20px;
flex: 0 0 200px
}
<div class="container">
<div id="left" class="column">
<span>COLUMN1</span>
</div>
<div id="center" class="column">
<span>COLUMN2</span>
</div>
<div id="right" class="column">
<span>COLUMN3</span>
</div>
</div>
Ok this is giving me quite an headache...
this is my code/example
https://codepen.io/anon/pen/xXpjYa
.flex {
display: flex;
flex-wrap: wrap;
}
.imageContainer {
flex: 1 0 30%;
height: 200px;
border: 5px solid black;
background-color: deeppink;
margin:15px;
}
.imageContainer:empty {
height: 0;
border: none;
};
<div class="flex">
<div class="imageContainer">a</div>
<div class="imageContainer">a</div>
<div class="imageContainer">a</div>
<div class="imageContainer">a</div>
<div class="imageContainer"></div>
<div class="imageContainer"></div>
</div>
the problem is that I want to achieve/fix two things:
the far left and far right column should be touching the edge of the viewport
the fixed gap should be 30px and only the pink boxes stretch responsively
notice the last item (5) is slightly wider than the others...why??
please help! thanks!
You set the margin to be 15px, on .imageContainer this applies to all sides, including the sides between these imageContainers and the viewport. So basically your first ask and your second ask are fighting against each other.
You can set a margin on .imageContainer and a negative margin on the parent .flex to accomplish both.
The last visible item is longer because the two divs following it are collapsing and not showing, which affects the layout. If you add the css attribute box-sizing: border-box to your .imageContainer rule, it will fix this issue. You can also assigned a fixed height to .imageContainer, or add content to all of the .imageContainer divs to prevent this from happening.
See this codepen for the modified code.
Instead of margin use justify-content: space-between and set flex: 0 0 30% instead of flex: 1 0 30%. Last item is bigger because there is no border on other two.
body {
margin: 0;
}
.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.imageContainer {
flex: 0 0 30%;
height: 200px;
border: 5px solid black;
background-color: deeppink;
margin: 15px 0;
}
.imageContainer:empty {
height: 0;
border: none;
}
<div class="flex">
<div class="imageContainer">a</div>
<div class="imageContainer">a</div>
<div class="imageContainer">a</div>
<div class="imageContainer">a</div>
<div class="imageContainer"></div>
<div class="imageContainer"></div>
</div>
I am trying to build a layout which has two separate content groups: one on the left side and right side, with fixed width (20%/80%) for now. On each side, I am trying to arrange contents by using flexbox: left panel with flex-direction: column and right panel with flex-direction: row wrap. The number of contents on each side can be flexible. The panel with less contents should match the height of the other, 'taller' side.
So far, I was able to achieve the basic layout, as shown in this jsfiddle. However, my problem is that I cannot make the the 'shorter' panel to fill the height, even though I set the height to be 100%. In the given example, there is an empty space between 'C' div of left panel and 'Box7' div of the right panel. The html/css code is show below.
How could I fix this problem or is there nicer simpler layout solutions? Any help would be appreciated.
HTML
<div class='top'>
<div class='left'>
<div class='litem'>A</div>
<div class='litem'>B</div>
<div class='litem'>C</div>
</div>
<div class='right'>
<div class='ritem'>Box 1</div>
<div class='ritem'>Box 2</div>
<div class='ritem'>Box 3</div>
<div class='ritem'>Box 4</div>
<div class='ritem'>Box 5</div>
<div class='ritem'>Box 6</div>
<div class='ritem'>Box 7</div>
</div>
</div>
CSS
* { outline: 1px solid Grey; }
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: Cornsilk;
}
.top {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.left {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
width: 20%;
height: 100%;
}
.right {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 80%;
height: 100%;
}
.litem, .ritem {
margin: 0;
padding: 0;
}
.litem { height: 50%; }
.ritem { height: 50%; width: 33.3%;}
.litem:nth-child(1) { background-color: Cyan; }
.litem:nth-child(2) { background-color: DarkCyan; }
.litem:nth-child(3) { background-color: DarkSeaGreen; }
When you apply height: 100% to html and body, you limit the growth of the child elements to 100% of the screen.
In your code, your .left flex item is indeed stretching to height: 100%, as specified. Add a border around .left for an illustration: DEMO
If you remove all the fixed heights, you'll enable the flex container to stretch all flex items, per the default setting: align-items: stretch (the setting that creates equal height columns). DEMO
When you add flex: 1 to the .left flex items (.litem), they then distribute all available space in the container evenly among themselves. DEMO.
In a nutshell, when you use the height property you override align-items: stretch, the flex setting for equal height columns.