I am currently working on a project where I have to create four quarters for a year using flexbox. I would like all the quarters to be spaced evenly with the year above quarter 2 and quarter 3. I know I have to use justify-content: space-evenly, but the problem is that quarter 2 and quarter 3 are too close to each other because they are in a container along with the year. I will leave the HTML and CSS here in case you want to see it in js fiddle.
HTML
<div class="container">
<div>Q1</div>
<div>
<div class="yearContainer">2022</div>
<div class="q2q3Container">
<div>Q2</div>
<div>Q3</div>
</div>
</div>
<div>Q4</div>
</div>
CSS
.container {
display: flex;
align-items: flex-end;
justify-content: space-evenly;
}
.yearContainer {
display: flex;
justify-content: center;
}
.q2q3Container {
display: flex;
}
My problem is that I don't know how to space out q2 and q3 so they have the same space as q1 and q4. I will leave pictures on how I image it to look like, also a real application of the view. enter image description here.
Thanks for any help.
I would use grid
for that design. But if you want to use flex
, you can use flex-basis
to define
an area of 25% | 50% | 25% space. Then you can use justify-content: space-around;
in the Q2, Q3 to evenly space the content. I also used text-align: center
in main container.
.container { display: flex; align-items: flex-end; text-align: center; }.yearContainer { flex-basis: 50%; display: flex; justify-content: center; }.q2q3Container { display: flex; justify-content: space-around; }.fb-25 { flex-basis: 25%; }.fb-50 { flex-basis: 50%; }
<div class="container text-center"> <div class="fb-25">Q1</div> <div class="fb-50"> <div class="yearContainer">2022</div> <div class="q2q3Container"> <div>Q2</div> <div>Q3</div> </div> </div> <div class="fb-25">Q4</div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.