Technical documentation page and how to make CSS flexbox example visible

Hi,

I am doing technical documentation page. I am trying to put some CSS flexbox examples with code and also as figures/images to be seen. How could I make this CSS Flexbox visible?

.flex-container {
display: flex;
flex-direction: column;
background-color: #006400;
}
.flex-container > div {
background-color: white;
width: 90px;
margin: 10px;
text-align: center;
line-height: 70px;
font-size: 30px;
}

Here is the page I am doing:
https://codepen.io/CoderInCodeCamp/pen/orKBwa

Give it a class and add the CSS to it.

<div class="flex-container flex-example">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>
.flex-example {
  display: flex;
  flex-direction: column;
  background-color: #006400;
}

.flex-example > div {
  background-color: white;
  width: 90px;
  margin: 10px;
  text-align: center;
  line-height: 70px;
  font-size: 30px;
}
1 Like

For some reason this does not work.:thinking:

<div class="flex-container flex-example">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

.flex-example {
  display: flex;
  flex-direction: column;
  background-color: #006400;
}

.flex-example > div {
  background-color: white;
  width: 90px;
  margin: 10px;
  text-align: center;
  line-height: 70px;
  font-size: 30px;
}

You didn’t close the max-width: 400px media query. I assume you meant to close it after the code selector and right before the .flex-container selector.

1 Like

@lasjorg, thanks for the advice :slightly_smiling_face: Yeh, it was about closing that query. Now it works :sunny:

I also wonder, how could I change successfully the background colour and the font color of a navbar area, when I hover over it?

Remember that .nav-link is a class. You have the selector without the class (nav-link).

.nav-link:hover{
background-color:#51074a !important;
color:white;
}
2 Likes