This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
For CSS Flexbox layouts, I have been given to understand that we have align-items property to align our item on the cross axis, while we use justify-content to align the item on the main axis.
Now does the above statement applicable only with the default flex-direction i.e. row
Does it change when we use flex-direction as column.
So essentially, I am confused with how the behavior of align-items and justify-content when we have flex-direction as column ?
Example
On following link
https://jsbin.com/wakagup/edit?html,output
.box {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
If we change align-items from flex-start to flex-end, the divs seem to move horizontally rather than vertically which is what is confusing me.
Also, the divs move differently when we remove flex-direction: column; and try different values for the align-items/justify-content
When the direction is inverted the axis inverts thus the opposite behavior.
The flex-direction CSS property sets how flex items are placed in the
flex container defining the main axis and the direction (normal or
reversed). - MDN
Related
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.
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;
}
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 6 years ago.
I'm having a really hard time understanding what's the difference? From my research it seems like justify-content can do... space-between and space-around, while align-items can do... stretch, baseline, initial and inherit?
Also looks like both properties share, flex-start, flex-end and center.
Is there and dis/advantages to using one over the other or is it just preference? I feel like they are way to similar to just do the same thing anyone know the difference? thanks!!
Both set the alignment of the content.
1. justify-content: along primary axis
(set horizontal alignment/spacing if flex-direction is row or vertical alignment/spacing if flex-direction is column)
For instance, if flex-direction is row (default):
flex-start; Align children horizontally left
flex-end; Align children horizontally right
center; Align children horizontally centered (amaze!)
space-between; Distribute children horizontally evenly across entire width
space-around; Distribute children horizontally evenly across entire width (but with space on the edges
2. align-items: along secondary axis
(set vertical alignment if flex-direction is row or horizontal alignment if flex-direction is column)
For instance, if flex-direction is row (default):
flex-start; Align children vertically top
flex-end; Align children vertically bottom
center; Align children vertically centered (amaze!)
baseline; Aligned children vertically so their baselines align (doesn't really work)
stretch; Force children to be height of container (great for columns)
See it in action:
http://codepen.io/enxaneta/full/adLPwv/
In my opinion:
These should have been named:
flex-x: alignment/spacing in primary axis
flex-y: alignment in secondary axis
But with HTML you can never have nice things. Never.
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.
The old display:box had the ability to justify element vertically, so for N number of elements with H defined height, they will arrange themselves justified (vertically) in relation to the parent element.
Is there any way of achieving this using the current dislpay:flex system?
You are looking for the flex rule justify-content: space-between;. Put that on your parent element and it will align the items so the first one touches the start of the container, the last one touches the end of the container, and the rest of the space is distributed between the elements.
You can also use align-items to align your elements in the direction perpendicular to your flex direction. For example if your flex-direction is column (vertical), then justify-content will justify items vertically and align-items will align them horizontally. Conversely if your flex-direction is row (horizontal), then justify-content will justify items horizontally and align-items will align them vertically.
More info here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
With display: flex you have justify-content for horizontal alignment and align-items for vertical alignment.