I saved the code here : http://codepen.io/anon/pen/FxKHB
Maybe it's better for you to see it and try something to help me.
My problem is that I have to position the box with 'Dessert' just under the box with 'Entrée' : without the space between.
I use flexbox layout in my container :
.menuContainer
{
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
align-items: flex-start;
}
Problem : the box 'Dessert' is pushed under because there is too much lines in the box 'Plat'.
Maybe I chose the wrong layout. I chose this one because when the width of the window/device is too small, I need to get everything in one column.
I can not just change the relative position of my box because each content is not static. I mean, it can have more lines.
What should I do ? Is it even possible ?
Thank you for your help !
An elegant alternative would be to change your align-items property to stretch for you container and then vertically center the items by making them flexboxes.
I guess it is not quite the desired effect, but without changing the markup this is the best solution I could come up with.
PEN
Related
I really need your help here. I am very new to this Front End work and have submitted few questions related to this issue.
I am building an UI using react js. Where i display the cards for products and resources. I am using display flex in the container and making it center justified. But the issue is
I want to limit 4 cards per row
The width and hight of the cards to remain same irrespective of screen size
I have two sections where i display cards, at first place i am displaying 8 cards and the second place i am displaying two. I want the cards should start from same position in the UI
Alignment issue with header section
Here is the code and Demo: https://codesandbox.io/s/527rx9
Here is how it looks currently
I got some feedback from other questions i had pasted to use width to 1500px. But deep down i feel , not a right way and will break in some screen. But in this case as well i see alignment issues. below image by using 1500px in container width
Really need your help here to have a fix around it. If you are willing please paste the codesandbox or anyother link with a working code.
Regarding your container css for the grid:
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
/* width: 1500px; */
}
It's no problem setting a max-width and you should do it, however dont use a specific width, instead set the max-width to 1500px if that's your desired max-width
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 1500px;
}
However i would recommend putting all the content below your banner inside of a div
<div class="content-container">
And setting the CSS of that one to the max-width in order to avoid some indentation problems to solve this specific problem
I am creating a section in a website with three divs. I'm displaying the divs in one line with display flex and orientation row.
To make the design responsive, I want it to appear as a column as the screen size decreases. In the media query, I'm setting the container to flex-direction: column; but it's not working as intended. Two divs appear in a column, while the middle one is on the side. I have no idea why it is not working when in my last project I did the same thing and had no issues. Link to the code below so you can see what I wrote:
https://codepen.io/DanDiaz/pen/PopmOdq
.grid {
height: 95vh;
padding-top: 5vh;
display: flex;
flex-direction: column;
}
I think thats due to the 'flex-wrap: wrap' on class .grid!
If you remove this property, it works :) Just need to set the proper image height then.
I am practicing out using css flexbox.
My question is: what should I do if I want to put the button at the right side of the pag?
I already tried flex-end and text-align right. I used flex at row also tried it on col-12 too, but the output is still the same..
here's the repl link
repl.it
You can try
display: flex;
justify-content: space-between;
on .col-12.
This will make .col-12 span the full width of the page and evenly distribute the extra space between the flex items inside it.
I'm trying to use Angular Material 6 Dynamic grid-list. The example relating to the documentation puts contents of the grid in the centre of each tile. See example here
I want the content to go in the top left hand corner of each tile.
I have tried the following css which does not work.
.mat-grid-tile .mat-figure {
justify-content: flex-start;
align-items: flex-start;
}
Put in styles.css:
DEMO
.mat-grid-tile .mat-figure {
justify-content: flex-start !important ;
align-items: flex-start !important;
}
This might not fit everyone's needs, but instead of wrestling with the functionality and css properties in order to fit alignment, your component can set the width/height of inner components to 100%. This way, Angular will still get its way (center it all!), and you can adjust the alignment as you see fit (left, right).
Example here with simple checkboxes (my real world scenario), but you can obviously expand on this with whatever your situation is (most complex example is the last one).
https://stackblitz.com/edit/angular-74i5kw
Although this is late, I was having the same issue. I had to use the !important variant to achieve what was needed. Then I got to my component's CSS and added:
:host >>> .mat-figure{
align-items: start !important;
}
More information - https://angular.io/guide/component-styles
This works.
:ng-deep .mat-grid-tile-content{
justify-content: flex-start !important ;
align-items: flex-start !important;
}
add the following style to the content of the grid-tile : "align-self: start"
I've been trying to create this webpage off a course from udemy. If you take a look at the picture you'll notice that at the bottom at the GET INVOLVED section, my buttons and texts are not aligned. I need advice on how to make these columns even so that the buttons are aligned. Should I use margin/padding or is there another way?
Assuming that the description is written in a div try giving min-height to that div
An age old question indeed: how to make 2+ divs the same height?
There have been many hacks and workarounds, but nowadays flexbox comes to the rescue.
#wrapper { /* Something around those 3 columns */
display: flex;
}
.pill { /* Every column has this class */
flex: 1;
align-items: center;
display: flex;
justify-content: space-between;
flex-direction: column;
}
Example on JSFiddle
Before using this example, I would recommend reading something about flexbox, maybe this exhaustive guide.
As stated below in the comments, there are some issues with cross-browser support at the moment. More details here