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)
Related
I have a problem with section 'descr'.
When I open PC window, all content positions in center.
When I open mobile format, first section 'container' is ok (in center), but 'descr'
on the left side.
Why it could be?
'main' - is flex, and justify-content:center.
Also I added width:100% for 'main', but nothing changes
When flex-direction: column, justify content and align items are changing directions. So, you must use align-items: center; to set them on the center, because flex-direction is set to column.
You must add align-items: center not justify-content: center, because when you add flex-direction to column you reverse things.
.main {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
The main axis is defined by flex-direction, which has four possible values:
row
row-reverse
column
column-reverse
Should you choose row or row-reverse, your main axis will run along the row in the inline direction.
If flex-direction is set to row the main axis runs along the row in the inline direction.
Choose column or column-reverse and your main axis will run from the top of the page to the bottom — in the block direction.
If flex-direction is set to column the main axis runs in the block direction.
Therefore, by using flex-direction: column; you are saying that your main axis is the vertical axis. This means that justify-content: center; will align your items vertically, not horizontally. So, to align them horizontally, you must use align-items: center; to align the items along the cross axis.
i am trying to get a fontawesome icon to be right aligned while a input field on same line shoule be left aligned. both units should be responsive and stay at there positionings.
i created a sandbox and a img where it is wrong to show what i mean.
https://codesandbox.io/s/bold-wind-cut7z?file=/src/components/HelloWorld.vue
https://cut7z.csb.app/
this is what i want
Here you go https://jvfe7.csb.app/
I removed the w-50 class which made the element only stay at 50% width and I remove the left: 300% from the icon. The flex property on the input field is also overridden by a flex: none property and then instead controlled it with the code beneath.
Then I added
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%
To the element containing both the input field and the icon. The justify-content: space-between makes the two element stay at both the sides, which you want.
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
how to align a flex item to the right?
.row {
display: flex;
text-align: right; //nothing happens
}
<div className="row">
<div className="col">content</div>
</div>
the output of this is something like
| content |
and I´m looking for
| content |
Aligning items in flex needs to be handled using justify-content or align-items
You need to use justify-content in your code:
.row {
display: flex;
justify-content: flex-end;
}
When you use display:flex for an element it has a default flex-direction with value of row. it means your inner elements will be placed in a row. This direction(row) is your main direction. justify-content will specify the location of your items in their main direction.
The value of justify-content can be flex-start, flex-end, etc. You need to set it to flex-end which in your situation means right side.
I highly recommend you to read the below link for more information:
justify-content:
This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line. A Complete Guide to Flexbox
.row {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
First, you need to specify the direction of items (flex-direction) as row (horizontally) or column (vertically).
Then, if direction is row, align items using justify-content property with flex-end value. This will align items from the right to left (from the end of row to the start) / (oX axis)
If direction is column, align items using align-items property which have almost same values as justify-content, but is configured for vertically align (oY axis)
This post can help.
.row {
display: flex;
justify-content: flex-end;
}
I am having difficulties working out how instead of having all the elements spaced out equally to instead have the elements together but still vertically centered.
i want it so there are only gaps on the outside of that content
please see my website for code
https://ukhotspot.co.uk/
You need to add align-content: center to your flex container.
.flex {
display: flex;
align-items: center;
align-content: center; /* NEW */
}
When positioning a single line in the cross axis of a flex container, you can use align-items.
But when the container has multiple lines – like in the image – align-items is no longer useful. The align-content property becomes necessary.
8.4. Packing Flex Lines: the align-content
property
The align-content property aligns a flex container's lines within
the flex container when there is extra space in the cross-axis,
similar to how justify-content aligns individual items within the
main-axis. Note, this property has no effect on a single-line flex
container.
The reason why you have "all the elements spaced out equally" is because the initial value of align-content is stretch, which causes the lines to spread across evenly in the container.
There are six different values for align-content. With align-content: center, all lines are packed in the center of the container.
At the bottom of my web site at http://clearwaterfloridabeachrentals2.imbookingsecure.com/ there is a nav menu and three boxes with images. They are not centered instead they are left aligned. What CSS code can I use to center it?
This is the CSS I have:
.row-fluid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.textwidget {
text-align: center
}
Adding the .textwidget css fixed the three boxes but the menu is still left aligned. Not sure what code directly affects it.
use text-align: center on the element
Use text-align: center for the div wrapping the three images.
And make the table width="100%" for the nav menu
Flexbox only works one level deep:
flexible container and flexed child. So you need to make the menu a flex container too and then justify-content: center the child elements
Add flex: 1 to the child elements when you need them spaced evenly.
But this may not work well in your design as it is rather nested.
Essentially your footer is a column of two flexible rows
menu (row of 8 flexed columns which need to be centered on the row)
copyright (row of 2 flexed columns which seem to need space-between)
React on this first so I can help you further with restructuring