Hello,
I’m having a bit of trouble understanding flex directions.
Below is the current code I have on /learn.
From what I can see, the “header, footer” element is set as a row.
So shouldn’t that apply to “.follow-btn” as well? I added “align-items: flex-start;”
to my “.follow-btn” element to play around with the code and I feel like it’s acting as if it is a column rather than a row. Shouldn’t the follow button move next to the profile name if I apply flex-start to the “.follow-btn” element? Also, since “flex-direction: row;” is added to “.profile-name” would that override the row that is set in “header, footer”?
Sorry about my wording of the question, I’m just a bit confused as to how this works.
Thank you,
Peter
header, footer {
display: flex;
flex-direction: row;
}
header .profile-thumbnail {
width: 50px;
height: 50px;
border-radius: 4px;
}
header .profile-name {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 10px;
}
header .follow-btn {
display: flex;
margin: 0 0 0 auto;
}
header .follow-btn button {
border: 0;
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
display: flex;
margin: 0;
}
#inner p {
margin-bottom: 10px;
font-size: 20px;
}
#inner hr {
margin: 20px 0;
border-style: solid;
opacity: 0.1;
}
footer .stats {
display: flex;
font-size: 15px;
}
footer .stats strong {
font-size: 18px;
}
footer .stats .likes {
margin-left: 10px;
}
footer .cta {
margin-left: auto;
}
footer .cta button {
border: 0;
background: transparent;
}
</style>
