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.
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
This question already has answers here:
What do "flex" and "justify-content" achieve that "text-align" doesn't?
(3 answers)
Closed 1 year ago.
I'm aware of the differences between the two. I'm concerned with what is best practice and if there are any performance or a11y implications with using one or the other. Example usages of the these would be:
text-align: left;
or
align-items: flex-start;
In this hypothetical scenario, I'm just working with text positioning.
If your container is flex-direction: row; adding align-items: flex-start; will move the text to the top of the container as align-items defines how flex-items are aligned on the cross axis. You would probably want to use justify-content: flex-start; in this scenario as that would align the text to the left, or start of the container. If you're like me and tend to put a text-align:center on the <body> it can be nice to use justify-content: flex-start (and align-items:center usually) as flexbox is just an awesome, powerful tool that you can use with limited code and you don't have to manually add a text-align property to every piece of code you want to be aligned differently than center.
I'm trying for some days to vertically align the .sl_container.
I have tried vertical-align: middle, but that doesn't work.
If i specify a height and width for the .slideshow, then using top: 50%; and transform: translateY(-50%);, that works. See here.
The problem is that if i remove the height and width for the slider to take up the available space and adapt, then the this will make the inner div appear moved upwards. See here.
display: table-cell; was not an option as it would have the arrows at the sides of the full width of the parent div instead of on the image.
I've tried flex before, and it gets vertically aligned, but if the parent DIV width is bigger than the child DIV, for some reason it goes to
As I said, I’ve tried multiple ways and there is not a single one that gets it done well without breaking the arrow positions.
What I’ve done until now: JSFiddle
The before mentioned settings are commented out in the CSS section.
Any insight to this would be helpful as to a way or how to get it aligned without breaking the whole slide and arrows.
FYI: There is a bleeding effect from the DIV's or images expanding like 1-2px to the bottom, reason why I have each DIV coloured to see if I can fix it. I'm sure it something silly and if you know what it is, please say so. It’s not important so I don’t really care much. xD
Add this to your slideshow element, using flexbox. Flex Needs prefixing for IE11 (caniuse)
.slideshow {
display: flex;
align-items: center;
}
Edit: I enabled the commented height and width styles in your jsFiddle, but this method will vertically align slideshow child regardless of width and height.
Try using flexbox, it's the most elegant solution for vertical alignment
E.g.
<div class='parentDiv'>
<div class='childDiv'>
</div>
</div>
.parentDiv {
display: flex;
align-items: center;
justify-content: center;
}
Take a look -> here
We're using flexbox in our Angular 2 app but I'm running into an issue where, while once data is loaded the div containing pagination components appears below the data, in the second or so where the data is still loading the pagination components float to the top of the screen. I want to lock the position of the pagination components so a user doesn't see that movement. This is the css for the pagination component:
.pagination {
display: flex;
justify-content: flex-end;
}
What can I add to force this to position at the bottom of the page so it doesn't float to the top before the data loads? When I tried adding position: fixed and bottom: 0 it overrode other flex positioning and aligned left, when it should be right. So I want to use flex to do this - not standard css.
So, to summarize, I need this to force align right, AND align bottom.
.pagination {
display: flex;
justify-content: flex-end;
align-items: flex-end;
align-content: flex-end;
}
An initial setting of a flex container is flex-direction: row. This means that the main axis is horizontal and justify-content – which only works on the main axis – will align flex items horizontally.
For vertical alignment in a row-direction container use align-items (for a single line container, i.e., nowrap) and/or align-content (for a multiline container, i.e., wrap)
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