Is it possible to align elements horizontal and vertical in a flexbox container?
So you have your html like this:
<section class="flex-container">
<article class="project--vertical project1"></article>
<article class="project--vertical project2"></article>
<article class="project--horizontal project3"></article>
<article class="project--horizontal project4"></article>
<article class="project--horizontal project5"></article>
</section>
An example (that doesn't work yet) can be found at: http://codepen.io/JordyPouw/pen/MYJOde
cross-axis alignment is done with the align-items property. justify-content is used for aligning along the same axis. It sounds to me like, in your case, you just need to use both of those properties, and set the value to center:
.flex-container {
padding: 20px;
display: flex;
-webkit-flex-flow: row wrap;
justify-content:center;
align-items: center;
}
Related
Trying to position "Certamente não" and "Certamente Sim" at the same height.
Using margin top doesn't seem to align them correctly.
You can use "flexbox" to align them. For example:
.parent {
display: flex;
align-items: center;
}
<div class="parent">
<span>Certamente não</span>
<span>Certamente Sim</span>
</div>
Learn more about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 1 year ago.
I would like to have two items aligned horizontally, but I don't know how to use flex to make them responsively separated:
<div class="container">
<div class="item-left">Left</div>
<div class="item-right">Right</div>
</div>
.container {
display: flex
}
The purpose is that no matter how I change the width of screen, they are still be separated (one on the left and another on the right). I can use grid and justify-self to achieve this, but how would I use flex to get this expected result?
Thank you!
By using justify-content: space-between:
.container {
display: flex;
justify-content: space-between;
}
<div class="container">
<div class="item-left">Left</div>
<div class="item-right">Right</div>
</div>
.container {
display: flex;
justify-content: space-between;
}
<div class="container">
<div class="item-left">Left</div>
<div class="item-right">Right</div>
</div>
Try using justify-content: space-between; for your container. It will evenly put space between your elements.
See MDN Web Docs.
It will probably break once the screen is too small for both elements to fit next to each other so you will probably have to have at least one media query that removes display: flex; or that changes the width of the two elements.
This question already has answers here:
How to vertically align text inside a flexbox?
(13 answers)
Closed 1 year ago.
I am creating a header and ideally would like the title to the left and the navbar icon over to the right. I can achive this using a parent div set to dislay: flex with justify-content: space-between as seen below.
Using Flex
However the I cannot apply vertical align in this instance to centrally align the text and icon horizontally. I suppose I could use margin to get it looking correct but not sure if this is best approach.
On the other hand I could do something like this using display: inline-block however am then lost on how to postion the icon over to the right.
Using inline-block
My question is which method is better and additionally how I achive the desired functionaility so that the text sits on the left side with the icon on the right side of the viewport ensuring they are both vertical aligned?
You can use align-items to vertically align flex items along the Cross Axis in a row layout.
Specifically, align-items: center so the flex items margin boxes are centered within the line on the cross-axis. Have a look at the updated CodeSandbox Demo
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="container">
<h4>Workbench</h4>
<span>☰</span>
</div>
Is this what you're trying to accomplish?
header {
display: flex;
justify-content: space-between;
align-items: center;
}
<header>
<h1>
Text
</h1>
<div>
Some Icon
</div>
</header>
You can use align-items: center. Since your flex direction is row, align-items: center will control the vertical alignment.
div {
display: flex;
justify-content: space-between;
width: 80%;
align-items: center;
}
If i understood well align-items: center; paired with justify-content: space-between should do the trick
I want to display a calculation with exponents (and more). To set the elements in line i use flexbox. Within the flexbox element i want to make use of the vertical-align CSS property. But the vertical-align property doesn't work.
I tested it with different approaches and in the end one solution worked. But then the justify-content property is not working anymore. in my attempt i used for the property: flex the webkit version: -webkit-box.
Here is the snipped in a fiddle if you want to test it: https://jsfiddle.net/oe3hxfma/
.calculation {
display: flex;
justify-content: center;
font-size: 1.3em;
}
.exponent {
display: inline;
vertical-align: super;
}
.calculationTwo {
display: -webkit-box;
justify-content: center;
font-size: 1.3em;
}
<div class="calculation">
3
<div class="exponent">
2
</div>
</div>
<div class="calculationTwo">
3
<div class="exponent">
2
</div>
</div>
How can i make use of the vertical-align when the parent elmenet is displayed as flexbox.
The vertical-align property works only with inline-level and table-cell elements (MDN).
Because the exponent element is a child of a flex container, it is automatically blockified (spec). This means it computes to a block-level element and vertical-align is ignored.
It doesn't matter how you define the display value for the flex item (e.g., in your code you have the flex item set to display: inline). In a flex formatting context, the display value of flex items is controlled by the flex algorithm.
The key to using vertical-align is to remove it from a flex formatting context. Create an element that is a child of the flex item. Now the exponent value is outside the scope of flex layout, and you can set it to display: inline.
Also, because the text is aligned to the top of the container, there is no space for vertical-align: super to work. So align the text to the center or bottom of the container.
Add align-items: flex-end or center (depending on how much superscripting you want).
.calculation {
display: flex;
justify-content: center;
align-items: flex-end;
font-size: 1.3em;
}
span {
vertical-align: super;
}
<div class="calculation">
3
<div class="exponent">
<span>2</span>
</div>
</div>
You should use "align-items" property to align items in vertical position:
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}
stretch: fit in the container,
flex-start: align item vertically upward,
flex-end: align items vertically downward,
center: align items to vertically center,
baseline: items are aligned such as their baselines align
just a suggestion, why don't you try to use sup HTML Tag for exponential?
<div>
3 <sup>2</sup>
</div>
and for vertical alignment, display:flex use align-items like in above answers.
div
{
display: flex;
justify-content: center;
}
<div>
3 <sup>2</sup>
</div>
.calculation {
display: flex;
justify-content: center;
align-items: flex-end;
font-size: 1.3em;
}
span {
vertical-align: super;
}
<div class="calculation">
3
<div class="exponent">
<span>2</span>
</div>
</div>
You could try give the content some padding and use the align-items: stretch feature of flex.
Here is a very useful guide to flex! It's awesome to keep it in your back-pocket as a front end developer!
Flexbox Guide!
I have some weird behavior going on in my divs at the moment, each div is written like the other (they are just mirror images). The text is mimicking columns and is setting side by side instead of top to bottom like it should. The oddest thing is, it seems to be working fine on another page this particular page only contains the behavior.
The code is something like this
<div class="flex-wrap">
<div class="flex">
<h3>A title</h3>
<p>some text</p>
</div>
<div class="flex">
<h3>A title</h3>
<p>some text</p>
</div>
</div>
<style>
.flex-wrap{
display:flex;
flex-wrap:wrap;
}
.flex{
display:flex;
align-items: center;
}
</style>
I've taken this apart piece by piece in the inspector tool and I'm even more baffled as to why it works fine on one page and not at all on another. The last section uses the same css layout it just contains a different picture and text. Can anyone tell me how to fix this? BONUS POINTS IF YOU CAN TELL ME WHY.
The first thing to keep in mind is that flex layout applies only between parent and child elements. Descendants in a flex container beyond the children do not participate in flex layout.
In your "broken page", the four side-by-side paragraph elements are children of a flex container (.tours-sec-3-p2-wrap).
.tours-sec-3-p2-wrap {
padding: 2%;
align-items: center;
display: flex;
background-size: 15%;
padding-top: 0;
background-position: 0px 30%;
background-repeat: no-repeat;
}
An initial setting of a flex container is flex-direction: row, so the children (flex items) are lining up in a row. The quick and easy solution is to override the default with flex-direction: column.
In your "working fine" page, the image and paragraphs are not children of a flex container. These elements are children of a block container, and that container is the child of the flex container.
Your image and text are being aligned with float, not flex, properties.
If you want to use flex properties, add display: flex to the parent element.
Despite anyone's belief, the layouts of each section are exactly the same. They are generated with the cms, they are not static pages.
That said, the behavior was only different between the 2 because of the length of the content in each flex container. Adding the same content to the tours page created the same behavior.
The problem was indeed solved with flex-direction: column; and additionally adding justify-content: center;
If you don't want to use flex-direction: column; you can make your elements stretch to 100% width to force the wrap.
.flex-wrap{
display:flex;
flex-wrap:wrap;
}
.flex{
display:flex;
align-items: center;
flex-wrap:wrap; /* added */
}
.flex,
.flex h3,
.flex p
{
width: 100%;
}
<div class="flex-wrap">
<div class="flex">
<h3>A title</h3>
<p>some text</p>
</div>
<div class="flex">
<h3>A title</h3>
<p>some text</p>
</div>
</div>
Bonus Tip for justify-content: center and text aligning left after wrapping. (run the code snippet)
.flex-wrap{
display:flex;
flex-wrap:wrap;
flex-direction: column;
}
.flex {
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.text-centered {
text-align: center;
}
<div class="flex-wrap">
<div class="flex">
<h3>Centered (but it hasn't wrapped)</h3>
<p>centered text</p>
</div>
<div class="flex">
<h3>Not Centered (after wrap)</h3>
<p>sometimes you'll want to use justify-content: center; and keep the text centered along with whatever other elements are inside the div. You'll see in the 2nd example the text aligns left after it wraps. Add text-align: center; and it will center the text.</p>
</div>
<div class="flex text-centered">
<h3>Centered</h3>
<p>sometimes you'll want to use justify-content: center; and keep the text centered along with whatever other elements are inside the div. You'll see in the 2nd example the text aligns left after it wraps. Add text-align: center; and it will center the text.</p>
</div>
</div>