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.
Related
vertical-align: middle means the image's vertical center is lined up with the adjacent text's baseline. I need to line up the text's center with the image's center. Is this possible with just CSS? Trying to set line height on the adjacent text has proved futile as the image just realigns to compensate for it and none of the built in vertical-align values do what I need.
put the text into a <span> element and give that vertical-align: middle, too
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
According to MDN specs there is no vertical-align value that will do what I want. In-depth explanation of what the renderer is doing when aligning elements: Why is this inline-block element pushed downward?.
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.
I found many techniques about how to vertically center some text within a div, but all those techniques depend on fixed dimensions. Is it possible to achieve when the div's height and width vary as they're expressed in percentage?
You may try to add the line display: table-cell; to your css for that div
JSFiddle Demo
I have two columns in a center column. (They are all div tags.) When I set the inner divs to float:left, the outer div does not wrap around the inner divs.
Why, and how do I fix that?
set overflow: auto on the outer div.
Why does setting overflow alter layout of child elements?
set overflow:visible for that div, or remove overflow property.