Tribute page- FlexBox related question

[pspi098]

Hello,
I am trying to use Flexbox on the Tribute page. I want to place them in one row.
The reason why I separated the title is that I wanted the middle word in a different color. So I thought, that I put in class and with flex box put them in a row.
So my question is why the flexbox is not placing them next to each other in a vertical row.
The HTML:

Miroslav(MEKY)Zbirka

Miroslav

(MEKY)

Zbirka

CSS:
.h1 .h2 .h3{
display: flex;
justify-content: space-evenly;
flex-direction: row;
text-shadow: -2px -2px black
}
Thank you.

[carlosvisator]

Hi @pspi098

Sorry but without seeing your code I am not sure what your problem is, but did you try wrap the word inside a span element and then style it? I mean this way:

<h1>Miroslav <span class="meky">(meky)</span> Zbirka</h1>
.meky { color: green; }

You can use span for style inline things like words, short sentence or just letters, the same thing than using div for styling blocks.

Not sure if this is useful, but maybe if you share your HTML other can help as well.

Keep the good work and happy coding!

[pspi098]

Thanks for your quick reply. I pasted the code but for some reason it got interpreted.
The solution that you provided worked. Somehow, I forgot about the <span.

I am also having some trouble with understanding how the FLexbox works. I am trying to use it in the following case:
There are three divs/ in the screenshot. The first has a class tribute, the second discography, the third export/ . I want to place them next to each other. To me it make sense to use the Flex box, after trying several combinations of Flexbox , I am not sure if it is the right way to go.
If you could point me to a right direction, I would really appreciate it.
Thanks.

HTML:

The CSS:

[saurabhv749]

Hi @pspi098
flexbox is applied to the parent and children are aligned accordingly.

in your CSS you are applying flexbox to .tribute and .discography
instead you should do something like this

HTML

.container
    .tribute 
    .discography
    .exports

CSS

.container {
  display: flex;
  justify-content: space-around;
  align-items:center;
}

.tribute,
.discography,
.exports {
  background: $teal2;
  border:1px solid $teal5;
  color: $teal12;

  height: 500px;
  width: 30%;
  
  font-size:25px;
  box-sizing:border-box;
  padding:1rem;
}

[carlosvisator]

Hi again @pspi098

I think that @saurabhv749 already guide you in the right direction.

Anyway if you want to really understand how flexbox works I think the last and interactive article Guide to Flexbox by Josh Cameau is really helpful, it worth it!. And also web.dev Learn section is great, easier and shorter to read than MDN and with a lot of good small examples. All sections are great.

When I just start with something I use a lot this rules:

*, *::before, *::after { outline: 1px solid pink; }

to actually visualize all the boxes. Then I can use outline with a different line width and color in the part I am working on. I use outline and not usually border because it is not a part of the box model, so the final layout would be the same after comment those rules.

Also I find really helpful make a HTML squeme or mockup of my general structure before thinking in my design. Something like this is enough for me:

body
         div.tribute > section >
                h1
                ul.year >
                   li > span.year

         div.discography

and so on, note that I use the CSS notation, that way I have the classes and ids there too (probably I will add classes and ids later on, when I already started to think in the CSS).

I even can do a general one with only body, header, main > form, footer, for example, for a general layout and one for each of the small elements inside and their layout. I find really helpful if I am not working in the same thing the whole day, wich is mostly every time.

Then I can think in the design and make a pencil mockup, for example.

And finally, I start to work with the CSS, part by part, or from general layout to every small piece of it.

Sorry If I am too verbose, I just hope you find something of this useful and somehow it will help you to find your own working and thinking process.

If you cannot make it work just keep posting and we all will try to help you.

Happy coding and keep the good work!