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
Mark Skobelevs
12,667 Points
My list items do not overflow at all, rather the body shrinks.

Posted December 5, 2023 10:06pm by Mark Skobelevs

Mark Skobelevs
12,667 Points
1 Answer
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
Item in the middle above the text

Posted July 1, 2023 10:42pm by Barcode George

Barcode George
595 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
Frank Book
308 Points
flex property values

Posted June 24, 2023 9:36am 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
Peter Huang
5,427 Points
Dont understand flex-basis.

Posted November 13, 2022 5:49am by Peter Huang

Peter Huang
5,427 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
ameni smiai
UX Design Techdegree Student 9,993 Points
a Flex item have to be a simple item or a can be an article ? And the article is composed : header+parag

Posted January 21, 2022 9:43pm by ameni smiai

ameni smiai
UX Design Techdegree Student 9,993 Points
2 Answers
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
karan Badhwar
Web Development Techdegree Graduate 18,135 Points
Cross Axis

Posted October 8, 2021 7:34pm by karan Badhwar

karan Badhwar
Web Development Techdegree Graduate 18,135 Points
1 Answer
karan Badhwar
Web Development Techdegree Graduate 18,135 Points
Margin : auto;

Posted October 7, 2021 3:48pm by karan Badhwar

karan Badhwar
Web Development Techdegree Graduate 18,135 Points
4 Answers
Shayla Lewis
Web Development Techdegree Student 5,404 Points
Why do we need something for both container and item to center?

Posted September 11, 2021 3:54pm by Shayla Lewis

Shayla Lewis
Web Development Techdegree Student 5,404 Points
1 Answer
Bryan Halambeck
Front End Web Development Techdegree Student 6,430 Points
Next, give .row the flexbox property and value that will make it a multi-line flex container.

Posted September 7, 2021 4:05pm by Bryan Halambeck

Bryan Halambeck
Front End Web Development Techdegree Student 6,430 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
tayla Robeson
1,894 Points
The first step to using flexbox is creating a flex container. Target .main-nav and make it a flex container.

Posted August 10, 2021 12:56pm by tayla Robeson

tayla Robeson
1,894 Points
2 Answers
Deon Cole
658 Points
First, make .row a flex container.

Posted July 20, 2021 8:04pm by Deon Cole

Deon Cole
658 Points
2 Answers
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
ja5on
10,339 Points
is flex-basis in theory just a width property?

Posted May 10, 2021 4:48pm by ja5on

ja5on
10,339 Points
1 Answer
ja5on
10,339 Points
navigation, heading and flexbox

Posted May 8, 2021 1:06pm by ja5on

ja5on
10,339 Points
1 Answer
ja5on
10,339 Points
websites and flexbox

Posted May 8, 2021 1:04pm by ja5on

ja5on
10,339 Points
1 Answer
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
tlc84
Front End Web Development Techdegree Student 2,410 Points
I put align-self: center; to no avail...

Posted March 31, 2021 5:08pm by tlc84

tlc84
Front End Web Development Techdegree Student 2,410 Points
2 Answers
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

Prev Page 1 of 13 Next

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