I've tested the following but im asking, just in case there is a difference.
I have a container that is a flex container. The items have a property of flex: 1 1 100%. Just for curiosity purposes, I've also tested flex: 0 0 100% and I haven't notice any difference (maybe there is).
My question is: If the flex-basis is a 100%, does it even matter what the other 2 properties values are?
If the flex-basis is a 100%, does it even matter what the other 2
properties values are?
Yes. When the width of the items in a flexbox meet or exceed the width of the flexbox itself, flex-shrink comes into play (flex-grow only applies when the items are less than the width of the flexbox):
For example, in the case below, flex-shrink is set to 0 for the second item, so the second will not shrink, and will take up 100% of the viewport.
.flexbox{display:flex}
.item1,.item2{height:60px}
.item1{flex:1 1 100%;background-color:lightblue}
.item2{flex:0 0 100%;background-color:goldenrod}
<div class="flexbox">
<div class="item1"></div>
<div class="item2"></div>
</div>
If both items are set to flex-shrink:1, they will both take up half of the viewport (they shrink equally to 50%):
.flexbox{display:flex}
.item1,.item2{height:60px}
.item1{flex:1 1 100%;background-color:lightblue}
.item2{flex:0 1 100%;background-color:goldenrod}
<div class="flexbox">
<div class="item1"></div>
<div class="item2"></div>
</div>
If both are items set to flex-shrink:0, neither will shrink and they will both take up 100% of the viewport width, growing the width of the flexbox to twice that of the viewport:
.flexbox{display:flex}
.item1,.item2{height:60px}
.item1{flex:1 0 100%;background-color:lightblue}
.item2{flex:0 0 100%;background-color:goldenrod}
<div class="flexbox">
<div class="item1"></div>
<div class="item2"></div>
</div>
Related
I have this
<div class="flex flex-col">
<main class="max-w-screen-lg mx-auto">...</main>
...
</div>
I use mx-auto to center main
I also want main to have some maximal width on large screen that's why I use max-w-screen-lg!
But in result margin left and right takes all space around and shrinks main to its minimal possible width on large screen
I just want main to have max width centered inside container
Some possible solution might be this, but it requires extra div
<div class="flex flex-col">
<div>
<main class="max-w-screen-lg mx-auto">...</main>
</div>
...
</div>
Can someone help me with this:
I was able to add SVG with filled image but the aspect ratio/scaling doesn't work as expected. I tried a few solutions but neither of them worked. Please help. The link is below:
https://park-maksimir.hr/testnasve/
enter code here<style>
.aspectRatioSizer {
display: grid;
}
.aspectRatioSizer > * {
grid-area: 1 / 1 / 2 / 2;
}
</style>
<div class="aspectRatioSizer">
<svg viewBox="0 0 7 2"></svg>
<div>
Content goes here
</div>
</div>
Two things going on there:
As soon as you give a a viewBox, it goes full-width, but only as tall as the implied aspect ratio in the viewBox value. The viewBox value is essentially “top, left, width, height” for the coordinate system interally to the SVG, but it has the side-effect of sizing the element itself when it has no height of its own. That’s what is used to “push” the parent element into an apsect ratio as well. The parent will still stretch if it has to (e.g. more content than fits), which is good.
CSS Grid is used to place both elements on top of each other, and the source order keeps the content on top.
I want to do div, it has 2 different items, first one, can be shorter or longer depending on data. The second one is fixed height and it position starts when the first one ends.
The first have scroll if needed.
<div fxLayout="column" fxFlexFill>
<!-- other items -->
<div fxFlex fxLayout="column">
<div fxFlex class="scroll">
<ng-container *ngFor="let item of items">
{{item}}
</ng-container>
</div>
<div fxFlex="15%">
<button> button </button>
</div>
</div>
</div>
With this code what I get is the second div is always at bottom.
how can I do the first div have the height it needs depending on its content?
You can do this: [fxFlex]='height', where 'height' its a variable in your .ts file, you can change this height depending on the data you get.
For example, if you want that every item had height = 50px, you can make
height = items[lenght] * 50;
height = height + 'px';
Later, if you want that div don't get higher than 300px, you can add an additional step:
height = items[lenght] * 50;
if (height > 300) height = 300;
height = height + 'px';
I hope this can help you
My goal is to use ag-grid in an Angular 5 project and have the grid take up all of the available vertical space in a flexbox layout. The grid seems happy to use "height:100%" when it's contained in a div which has a defined pixel height or when the div has a percentage height but isn't in a flexbox layout. But it always seems to have no height when I try to host it in a flex item.
How can I get my grid to expand to take up the height of its flex item container? Here's a plunker with an example of what I'm seeing and trying: https://embed.plnkr.co/D8YgM6/.
Here's how I am creating my layout:
<div style="height:100%;display:flex;flex-direction:column;">
<div style="height:250px;flex-grow:0;">
<h5>Container div with specified height in pixels, ag-grid with percentage height</h5>
<ag-grid-angular style="width: 100%; height: 80%" class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData"
>
</ag-grid-angular>
</div>
<div style="flex-grow:1;">
<h5 class="red">Container div using flex height, ag-grid with percentage height</h5>
<p>How can I get the grid to be aware of my div's actual height?</p>
<ag-grid-angular style="width: 100%; height: 80%;" class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData"
>
</ag-grid-angular>
</div>
</div>
I want the grid in the second flex item to have an appropriate height. How can I do this?
In your plunker, set the flex-basis of the item containing your grid to 0, this achieves I think what you are after. I've just been wrestling with the same:
.item-1 {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}
Plunker Screenshot running in Chrome
I'm not sure why this works, maybe someone with more in depth knowledge of ag-grid can comment?
try setting auto height on grid ready event
this.gridApi.setDomLayout('autoHeight');
details: https://www.ag-grid.com/javascript-grid-width-and-height/
i want to center align an image of 18px height with text next to it. Here is the code i use:
<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle;">Some text here
</div>
With that code, the div container is rendered with a height of 19px instead of 18px and text isn't centered with image. I tried on Safari 4 and Firefox 3.6. What is the reason for that 1 px?
Thanks
Don't forget to reset styles
(margin/padding) : div, img, span {
margin:0; padding:0; border:0 }
For vertical-align to work, your
elements must me inline.
A classic choice to align text
vertically is to give a line-height
equal to container.
For example :
<div><img src="somepic.jpg" style="height:18px; vertical-align:middle;"><span style="line-height:18px;">Some text here</span></div>
Maybe you have a border somewhere in there you need to get rid of or set to zero width?
i'm not totally sure I understand what the problem is here but if its just that the image is a few pixels from where you would like it to be, then why don't you just position the image relatively. for example:
<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle; position: relative; bottom: 2px;">Some text here
</div>
this will shift the image up by 2px from where it originally was.