Treehouse | Community | Building a Navigation Bar with Flexbox

You found it first ⚡ 50% off any plan for 6 months, exclusive to new subscribers for a limited time only.

Join the Treehouse affiliate program and earn 25% recurring commission!

✨ Earn college credits in Cybersecurity, JS, HTML, CSS and Python

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

Newest
- Newest
- Active
- Unanswered
- Featured
All Topics

Jess W
4,391 Points
Setting the .main-nav to align-self: center; Vs the parent .main-header align-items: center;

Posted March 19, 2025 2:19am by Jess W

Jess W
4,391 Points
2 Answers
Magdalena M
7,078 Points
Another possible solution

Posted November 7, 2023 3:10pm by Magdalena M

Magdalena M
7,078 Points
1 Answer
Barcode George
595 Points
why is three elements targeted to become flexbox

Posted July 1, 2023 10:59am by Barcode George

Barcode George
595 Points
1 Answer
Frank Book
308 Points
3 elements solution

Posted June 28, 2023 3:23pm by Frank Book

Frank Book
308 Points
1 Answer
Peter Huang
5,427 Points
flex basis is almost like wrap?

Posted December 21, 2022 10:12pm by Peter Huang

Peter Huang
5,427 Points
2 Answers
Samuel Kleos
Front End Web Development Techdegree Student 13,728 Points
Why does the button stretch past the content width without specifying any width properties?

Posted November 15, 2022 2:11am by Samuel Kleos

Samuel Kleos
Front End Web Development Techdegree Student 13,728 Points
1 Answer
Samuel Kleos
Front End Web Development Techdegree Student 13,728 Points
The flex shorthand property assigns equal width to columns (.col) but flex-grow doesn't.

Posted November 15, 2022 12:45am by Samuel Kleos

Samuel Kleos
Front End Web Development Techdegree Student 13,728 Points
1 Answer
Emil Lau
6,233 Points
Why ."col can control the class of "primary col" and "secondary col" while not specifying the name?

Posted May 28, 2022 5:57pm by Emil Lau

Emil Lau
6,233 Points
1 Answer
Phoebe Tyson
7,504 Points
Columns display on top of each other instead of next to each other?

Posted January 5, 2022 5:03pm by Phoebe Tyson

Phoebe Tyson
7,504 Points
2 Answers
Preeti Thakur
17,158 Points
Couldn't we just use for the buttons display:inline-flex and flex-direction:row?

Posted November 20, 2021 10:53pm by Preeti Thakur

Preeti Thakur
17,158 Points
1 Answer
karan Badhwar
Web Development Techdegree Graduate 18,135 Points
min-height

Posted October 13, 2021 4:22am by karan Badhwar

karan Badhwar
Web Development Techdegree Graduate 18,135 Points
1 Answer
Kevin Nguyen
Web Development Techdegree Student 7,227 Points
why is the class named "primary" "secondary"while in the html file the class is set to "primary col" and "secondary col"

Posted September 5, 2021 11:18am by Kevin Nguyen

Kevin Nguyen
Web Development Techdegree Student 7,227 Points
1 Answer
nicolaspeterson
8,569 Points
Why do we target .col instead of .row?

Posted June 8, 2021 6:57am by nicolaspeterson

nicolaspeterson
8,569 Points
2 Answers
Mia Nguyen
2,964 Points
Why the flex-basis: 50% isn't working?

Posted April 1, 2021 10:01am by Mia Nguyen

Mia Nguyen
2,964 Points
1 Answer
Thomas Scott
7,682 Points
Let's display equal -- but flexible -- widths for the columns.

Posted March 14, 2021 6:19am by Thomas Scott

Thomas Scott
7,682 Points
1 Answer
Mathew Cook
5,359 Points
Mobile first approach

Posted February 2, 2021 1:20pm by Mathew Cook

Mathew Cook
5,359 Points
1 Answer
Kirt Perez
7,374 Points
When using justify-content in this example, I don't understand how the h1 element and unordered list created a huge gap

Posted November 2, 2020 6:16am by Kirt Perez

Kirt Perez
7,374 Points
2 Answers
Matt Nickolls
9,895 Points
Stumped with the final flexbox challenge

Posted October 30, 2020 9:17am by Matt Nickolls

Matt Nickolls
9,895 Points
1 Answer
ja5on
10,339 Points
vertical and horizontal

Posted September 7, 2020 1:42pm by ja5on

ja5on
10,339 Points
1 Answer
ja5on
10,339 Points
Flexbox and a three column layout with extra space.

Posted September 6, 2020 2:13pm by ja5on

ja5on
10,339 Points
0 Answers
Nick Huemmer
Front End Web Development Techdegree Graduate 26,840 Points
Why does 'justify-content: space-between' in the .main-header min-width: 1025px media query create such a large space?

Posted August 13, 2020 11:15pm by Nick Huemmer

Nick Huemmer
Front End Web Development Techdegree Graduate 26,840 Points
1 Answer
Jasper Kop
10,423 Points
why is the auto top margin moving the button down?

Posted May 27, 2020 11:13am by Jasper Kop

Jasper Kop
10,423 Points
2 Answers
Bartlomiej Pajak
5,063 Points
Is my fixed navigation is ok?

Posted April 8, 2020 12:16pm by Bartlomiej Pajak

Bartlomiej Pajak
5,063 Points
1 Answer
Zach Handler
Web Development Techdegree Student 5,332 Points
Would you use flexbox to make this type of layout?

Posted November 2, 2019 7:49pm by Zach Handler

Zach Handler
Web Development Techdegree Student 5,332 Points
1 Answer
Kit Howlett
6,774 Points
Flexbox - Difference Between flex-basis and flex-grow

Posted September 26, 2019 9:31pm by Kit Howlett

Kit Howlett
6,774 Points
1 Answer
Bibiana Balbuena Barbosa
14,768 Points
How do I stick the header?

Posted September 14, 2019 9:46am by Bibiana Balbuena Barbosa

Bibiana Balbuena Barbosa
14,768 Points
4 Answers
Alexei Thomas
2,492 Points
Why doesn't justify-content: flex-end work on the button?

Posted August 10, 2019 11:12pm by Alexei Thomas

Alexei Thomas
2,492 Points
1 Answer
Nikos Papapetrou
6,305 Points
How can I achieve text to float next and under an image? Is it possible inside the flexbox?

Posted July 9, 2019 12:11pm by Nikos Papapetrou

Nikos Papapetrou
6,305 Points
2 Answers
Robert Rydlewski
3,828 Points
flexbox misunderstanding. Instead of using ```display: inline block;``` I want to do the flexbox but it doesn't work :(

Posted June 30, 2019 4:19pm by Robert Rydlewski

Robert Rydlewski
3,828 Points
1 Answer
Michał Nowak
2,809 Points
Position left/right

Posted June 6, 2019 11:23am by Michał Nowak

Michał Nowak
2,809 Points
2 Answers

Prev Page 1 of 7 Next

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.