Unable to unerstand flexbox

HTML-CSS
#1

Tell us what’s happening:
In the task, I am supposed to set flex-direction to the column. On doing so, h2 and h3 are printed on different lines while setting the value to the column should have put them in different columns, which should result the output to be seen in the same line (as in the case when the value is set to row).

Your code so far


<style>
body {
  font-family: Arial, sans-serif;
}
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;
  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>
<header>
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<div class="profile-name">
  <h3>Quincy Larson</h3>
  <h4>@ossia</h4>
</div>
<div class="follow-btn">
  <button>Follow</button>
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
</div>
<footer>
<div class="stats">
  <div class="Retweets">
    <strong>107</strong> Retweets
  </div>
  <div class="likes">
    <strong>431</strong> Likes
  </div>
</div>
<div class="cta">
  <button class="share-btn">Share</button>
  <button class="retweet-btn">Retweet</button>
  <button class="like-btn">Like</button>
</div>
</footer>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

Challenge: Apply the flex-direction Property to Create a Column in the Tweet Embed

Link to the challenge:

#2

I have difficulties making sense of that sentence, but your code is correct and passes for me. If it doesn’t for you, that could be caused by browser extensions like dark mode or ad blocker.

#3

`[quote=“jsdisco, post:2, topic:435779”]

[/quote]

My bad!!

I’m not able to understand how flexbox is working.
when i use
flex-direction: row;
the content of h2 and h3 tags should be in the same line(in output).
and when i use
flex-direction: column;
as per me the content still should be displayed in the same line but that’s not case.

I hope I conveyed my point this time :sweat_smile:

#4

“column” doesn’t mean that they are in columns, but that they are in a column, as in vertical. It means that as new items are added, they will go below, “columnarly”.

I found this to be a good reference for flexbox - I use it all the time - no one can remember all this crap.

2 Likes
#5

As said, setting the flex-direction to column on the flex container does not create a new column for each flex item, it creates one column for both to share. The items flow top to bottom, instead of left to right (in default left to right reading mode).

#6