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.
Related
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 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;
}
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