I have aligned two divs side-by-side using Flexbox and I want the text in both the divs to be pushed to the bottom of the divs at equal levels but there seems to be different level of spacing underneath the individual texts.
.wrapper {
display: flex;
flex-direction: row;
}
.block1 {
font-weight: bold;
font-size: 2em;
color: red;
border: 1px solid;
display: flex;
align-items: flex-end;
}
.block2 {
font-size: 1em;
color: grey;
border: 1px solid;
display: flex;
align-items: flex-end;
}
.block1.hack-fix {
line-height: 29px; /* HACK */
}
<h2>Current:</h2>
<div class="wrapper">
<span class="block1">
23
</span>
<span class="block2">
Quote
</span>
</div>
<hr/>
<h2>Needed:</h2>
<div class="wrapper">
<span class="block1 hack-fix">
23
</span>
<span class="block2">
Quote
</span>
</div>
Thanks for the help!
What you're looking for is called baseline alignment.
To achieve this in flexbox use align-items: baseline.
Here's a more complete explanation:
What's the difference between flex-start and baseline?
.wrapper {
display: flex;
flex-direction: row;
align-items: baseline; /* NEW */
}
.block1 {
font-weight: bold;
font-size: 2em;
color: red;
}
.block2 {
font-size: 1em;
color: grey;
}
<div class="wrapper">
<span class="block1">23</span>
<span class="block2">Quote</span>
</div>
Parents :
display: flex;
Children:
flex: 1;
Related
I'm trying to render chords over lyrics using HTML and found a near perfect solution here on StackOverflow. My one problem with this solution is that it creates extra whitespace after lyrics if the chord name is longer than the associated word. This can be seen on the Csus4 of the first "Imagine" in the example at the end of this question.
To sum it up, I want to render chords over lyrics using HTML such that:
chords are always above the right lyrics
if screen is smaller than the line, lines overflow on word boundaries
if the chords are larger than the text below it doesn't create space between the lyrics
a chord can also be in the middle of a word
Edit:
chords never overlap
I have searched StackOverflow and googled a lot but every solution I found fails one of these criteria. All help is greatly appreciated!
Edit: Solutions may also involve javascript though I hope this can be solved without needing javascript.
body {
padding: 20px;
font-size: 30px;
}
.line {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
}
.chord-letter {
display: flex;
flex-direction: column;
align-items: left;
}
.no-space {
margin-right: 0;
border: solid 1px red;
}
.space {
margin-right: 0.33em;
border: solid 1px green;
}
.chord {
color: gray;
font-style: italic;
font-weight: bold;
font-size: 1.2em;
border: solid 1px blue;
}
.no-space .chord {
margin-right: 0.33em;
}
.word {
display: flex;
flex-direction: row;
align-items: flex-end;
}
<div class="line">
<div class="word">
<span class="no-space">Ima</span>
<div class="chord-letter space"><span class="chord">Csus4</span>gine</div>
</div>
<span class="space">there's</span>
<div class="chord-letter space"><span class="chord">Cmaj7</span>no</div>
<div class="chord-letter space"><span class="chord">F</span>heaven</div>
<div class="word">
<span class="no-space">Ima</span>
<div class="chord-letter space"><span class="chord">C</span>gine</div>
</div>
</div>
Basically you just need to set the chords to be position: absolute so they won't be part of the flow. You'd still need to figure out what to do when they overlap.
body {
padding: 20px;
font-size: 30px;
}
.line {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
}
.chord-letter {
display: flex;
flex-direction: column;
align-items: left;
}
.no-space {
margin-right: 0;
border: solid 1px red;
}
.space {
margin-right: 0.33em;
border: solid 1px green;
}
.chord {
color: gray;
font-style: italic;
font-weight: bold;
font-size: 1.2em;
border: solid 1px blue;
}
.no-space .chord {
margin-right: 0.33em;
}
.word {
display: flex;
flex-direction: row;
align-items: flex-end;
}
/* add these */
.word {
padding-top: 50px;
}
.chord {
position: absolute;
top: 0;
}
.line {
position: relative;
}
<div class="line">
<div class="word">
<span class="no-space">Ima</span>
<div class="chord-letter space"><span class="chord">Csus4</span>gine</div>
</div>
<span class="space">there's</span>
<div class="chord-letter space"><span class="chord">Cmaj7</span>no</div>
<div class="chord-letter space"><span class="chord">F</span>heaven</div>
<div class="word">
<span class="no-space">Ima</span>
<div class="chord-letter space"><span class="chord">C</span>gine</div>
</div>
</div>
I want to align my image right next to when the heading ends i.e next to "Sample Text".
Currently the container which contains heading and emoji is a flexbox.
.container{
display:flex;
.heading-text {
font-weight: 400;
font-size: 24px;
line-height: 1.33;
}
.emoji-img{
display: flex;
flex-direction: column;
align-items: center;
align-self: flex-end;
}
I've tried using grid too but cant find a way. What can I do?
If you would use simpler code, you have the solution.
.container {
display: flex;
align-items: flex-end;
}
.heading-text {
font-weight: 400;
font-size: 24px;
line-height: 1.33;
padding-right: 10px;
line-height: 1em;
}
.emoji-img {
padding-bottom: .1em;
}
<div class="container">
<div class="heading-text">
Some text<br>
Some more<br>
Heading text
</div>
<img class="emoji-img" src="https://www.gravatar.com/avatar/8?s=20&d=identicon" />
</div>
Use align-items for vertical aligning and justify-content for horizontal aligning.
For more, you can read about FlexBox here.
Here is an example for you:
.container{
/* edited here*/
width: 300px;
height: 200px;
display:flex;
align-items: center;
border: 1px solid red
}
.heading-text {
font-weight: 400;
font-size: 24px;
line-height: 1.33;
}
.emoji-img{
display: flex;
flex-direction: column;
align-items: center;
align-self: flex-end;
}
<section class="container">
<p class="headering-text">Hello, World!</p>
<img src="https://picsum.photos/50/50"/>
</section>
Simply put it there
.heading-text {width: 170px; font:16px/1.33 sans-serif;}
.emoji-img:after {content: "🦋"; font-style: normal;}
<div class="heading-text">
THIS IS THE SAMPLE TEXT HELLO HELLO Sample Text <i class="emoji-img"></i>
</div>
I'm trying to create this top header using flexbox.
Basically I would like to center the <div class="header-title"> (Institution institution 1) on the line with the 3 other elements you see. (Institutioner, Ledere and Log ud) like you see on the image.
.nav {
background: #e1e1e1;
}
ol, ul {
list-style: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.header-title {
justify-content: center;
align-self: center;
display: flex;
}
.nav ul li.logout {
margin-left: auto;
}
.nav ul li a {
text-decoration: none;
padding: 0px 20px;
font-weight: 600;
}
<div class="nav mobilenav">
<div class="header-title">
Institution institution 1
</div>
<ul>
<li>Institutioner</li>
<li>
Ledere
</li>
<li class="logout">
<a class="button-dark" href="/user/logout">Log ud</a>
</li>
</ul>
</div>
Demo - JSFiddle
Use nested flex containers and flex-grow: 1.
This allows you to create three equal-width sections on the nav bar.
Then each section becomes a (nested) flex container which allows you to vertically and horizontally align the links using flex properties.
Now the left and right items are pinned to the edges of the container and the middle item is perfectly centered (even though the left and right items are different widths).
.nav {
display: flex;
height: 50px; /* optional; just for demo */
background: white;
}
.links {
flex: 1; /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
display: flex;
justify-content: flex-start;
align-items: center;
border: 1px dashed red;
}
.header-title {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
border: 1px dashed red;
}
.logout {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
border: 1px dashed red;
}
.links a {
margin: 0 5px;
text-decoration: none;
}
<div class="nav mobilenav">
<div class="links">
Institutioner
Ledere
</div>
<div class="header-title">Institution institution 1</div>
<div class="logout"><a class="button-dark" href="/user/logout">Log ud</a></div>
</div>
jsFiddle
Use justify-content: space-between; like this:
.container {
display: flex;
justify-content: space-between;
}
<div class="container">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
Css grid will do this better than flexbox.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
button {
display: inline-block;
}
.short-content {
margin-left: auto;
}
<div class="grid">
<div class="long-content">
This has content that is fairly long
</div>
<button>CTA Button</button>
<div class="short-content">
Small Text
</div>
</div>
Here is a Flex solution that aligns the right and left containers while centering the middle container correctly.
.header-box {
width: 100%;
display: flex;
flex-flow: row wrap;
padding-top: 50px;
}
.left-header, .center-header, .right-header {
flex: 100px; /* adjust width if needed */
}
.header-box div:nth-of-type(1) {
text-align: left;
}
.header-box div:nth-of-type(2) {
align-self: center;
text-align: center;
}
.header-box div:nth-of-type(3) {
text-align: right;
}
<div class="header-box">
<div class="left-header">Left<br>header<br>content</div>
<div class="center-header">Center<br>header<br>content</div>
<div class="right-header">Right<br>header<br>content</div>
</div>
If you are open to changing your html, you need to put all the items in your header on the same level in the DOM.
Here's a working example
.nav {
background: #e1e1e1;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
}
.nav > div {
min-width: 0;
white-space: nowrap;
}
.header-title {
flex-basis: 80%;
text-align: center;
}
.nav div a {
text-decoration: none;
padding: 0px 20px;
font-weight: 600;
}
<div class="nav mobilenav">
<div>Institutioner</div>
<div>Ledere</div>
<div class="header-title">
Institution institution 1
</div>
<div class="logout">
<a class="button-dark" href="/user/logout">Log ud</a>
</div>
</div>
I'm using Flexbox to display various content in a panel. At the bottom of each panel is a list of icons.
This is easier to visualise in this Codepen Demo
And snippet..
* {
font-family: sans-serif;
}
.wrapper {
display: flex;
align-items: flex-start;
width: 500px;
background-color: #F9F9F9;
padding: 10px;
position: relative;
}
.image {
width: 150px;
margin-right: 1em;
}
.row {
display: flex;
flex-direction: column;
flex: 1 0 0;
}
.more {
font-weight: bold;
margin-top: 1em;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 4em;
}
.ideal {
position: absolute;
bottom: 20px;
right: -44px;
}
.ideal span {
color: green;
font-weight: bold;
opacity: .2;
margin-right: 4em
}
<div class="wrapper">
<div class="image">
<img src="http://placehold.it/150x68" alt="" />
</div>
<div class="row">
<span>Text content</span>
<span>Text content</span>
<span>Text content</span>
<div class="more">
<span class="one">ICON1
</span>
<span class="two">ICON2</span>
<span class="three">ICON3</span>
<span class="four">ICON4</span>
</div>
</div>
<div class="ideal"><span>ICON4</span>< ideal position</div>
</div>
Currently, icon 4 wraps around and goes to the top of its container, lining up with icon 1. I would like to move the 4th icon to the bottom, so it lines up with icon 3 (ideal position seen in green)
The code works great in the desktop view, so ideally I'd like a CSS style I can apply with a media query, as opposed to changing the HTML structure.
I'm new enough to flexbox, is there a rule I could apply to icon 4 that will force it to the bottom of the container?
Any help much appreciated!
Add margin-top: auto to four and throw in justify-content: space-around for the more element.
See demo below:
* {
font-family: sans-serif;
}
.wrapper {
display: flex;
align-items: flex-start;
width: 500px;
background-color: #F9F9F9;
padding: 10px;
position: relative;
}
.image {
width: 150px;
margin-right: 1em;
}
.row {
display: flex;
flex-direction: column;
flex: 1 0 0;
}
.more {
font-weight: bold;
margin-top: 1em;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 4em;
justify-content: space-around;
}
.four {
margin-top: auto;
}
<div class="wrapper">
<div class="image">
<img src="http://placehold.it/150x68" alt="" />
</div>
<div class="row">
<span>Text content</span>
<span>Text content</span>
<span>Text content</span>
<div class="more">
<span class="one">ICON1
</span>
<span class="two">ICON2</span>
<span class="three">ICON3</span>
<span class="four">ICON4</span>
</div>
</div>
</div>
I am trying to learn Flexbox but having trouble getting what I want.
What I want:
1 box which will have 2 labels (a number over top a label)
second box will have 4 labels (1 in top left, 1 in top right, 1 in center and 1 in bottom middle)
.flex-container {
display: flex;
background-color: lightgrey;
flex-direction: row;
align-items: stretch;
align-content: stretch;
}
.flex-item {
display: flex;
background-color: cornflowerblue;
margin: 10pt;
}
.flex-item-2 {
display: flex;
background-color: cornflowerblue;
margin: 10pt;
flex: 2 0 0;
}
.flex-qty-container {
font-size: 27pt;
margin: 0;
}
.flex-sub-container {
display: flex;
background-color: yellow;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
flex: 2 0 0;
}
.flex-item-left-corner {
background-color: red;
}
.flex-item-right-corner {
background-color: red;
align-self: flex-end;
font-size: 10pt;
}
.flex-item-center {
background-color: red;
font-size: 12pt;
}
.flex-item-bottom-middle {
background-color: red;
}
<div class="flex-container">
<div class="flex-item">
<div class="">
<p class="flex-qty-container">7</p>
<p class="flex-qty-label">Label</p>
</div>
</div>
<div class="flex-item-2">
<div class="flex-sub-container">
<p class="flex-item-left-corner">top left corner</p>
<p class="flex-item-right-corner">top right corner</p>
<p class="flex-item-center">Center of box</p>
<p class="flex-item-bottom-middle">Bottom middle</p>
</div>
</div>
</div>
1 box which will have 2 labels (a number over top a label)
This part you seem to have done already. I didn't change anything there.
second box will have 4 labels (1 in top left, 1 in top right, 1 in center and 1 in bottom middle)
This layout can be achieved with a properly nested flex container.
In your code, .flex-item-2 has one flex item: .flex-sub-container. This flex item doubles as a flex container and has four flex items (your labels).
<div class="flex-item-2">
<div class="flex-sub-container">
<p class="flex-item-left-corner">top left corner</p>
<p class="flex-item-right-corner">top right corner</p>
<p class="flex-item-center">Center of box</p>
<p class="flex-item-bottom-middle">Bottom middle</p>
</div>
</div>
Instead of having .flex-sub-container wrap all four labels, have it wrap only the first two. Then apply justify-content: space-between and the top left and top right labels are aligned as intended.
<div class="flex-item-2">
<div class="flex-sub-container">
<p class="flex-item-left-corner">top left corner</p>
<p class="flex-item-right-corner">top right corner</p>
</div><!-- END .flex-sub-container -->
<p class="flex-item-center">Center of box</p>
<p class="flex-item-bottom-middle">Bottom middle</p>
</div>
.flex-item-2 {
display: flex;
flex-direction: column;
}
.flex-sub-container {
display: flex;
justify-content: space-between;
}
With .flex-item-2 now a column-direction flex container, the cross axis is now horizontal and the align-self property can be used to center the lower labels.
.flex-item-center {
align-self: center;
}
.flex-item-bottom-middle {
align-self: center;
}
DEMO
I'm not exactly sure how much of your example is specifically needed, so I put some examples in to show you what your options are, and basically solves what you're asking for. More nesting would support more specifics, etc:
https://jsfiddle.net/1z4unyc2/
HTML:
<div class="flex-container">
<div class="flex-item">
<p class="flex-qty-container">7</p>
<p class="flex-qty-label">Label</p>
</div>
<div class="flex-item-2">
<p class="flex-item-left-corner">top left corner</p>
<div class="flex-item">
<p class="flex-item-center">Center of box</p>
<p class="flex-item-bottom-middle">Bottom middle</p>
</div>
<p class="flex-item-right-corner">top right corner</p>
</div>
</div>
CSS:
.flex-container {
display: flex;
background-color: lightgrey;
flex-direction: row;
}
.flex-item {
display: flex;
background-color: cornflowerblue;
margin: 10pt;
flex-direction: column;
justify-content: center;
align-items: center;
}
.flex-item-2 {
display: flex;
background-color: cornflowerblue;
margin: 10pt;
flex-direction: row;
justify-content: center;
align-items: center;
}
.flex-qty-container {
font-size: 27pt;
}
.flex-item-left-corner {
background-color: red;
align-self: flex-start;
}
.flex-item-right-corner {
background-color: red;
align-self: flex-start;;
font-size: 10pt;
}
.flex-item-center {
background-color: red;
font-size: 12pt;
align-self: center;
}
.flex-item-bottom-middle {
background-color: red;
align-self: flex-end;
}