Individual styling of flexbox items, not working

Hi everyone, I am just doing a warmup project as a beginner in flexbox styling in css, but I was wondering why is my flexbox items not styling individually??
here is my warmup project:

here is my html so far:

<!doctype html>
<html>
<head>
<title> My warmup project</title>
<link href="./stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
      <div class="flexbox-container" >
         <div  class="flexbox-item flexbox-item-1">item 1</div>
         <div  class="flexbox-item flexbox-item-2">item 2</div>
         <div  class="flexbox-item flexbox-item-3">item 3</div>
         </div>
</body>
</html>

----->and my CSS

.flexbox-container{
    display: flex;
    flex-basis: 400px;
    background: yellow;

}
.flexbox-item{
    display:inline-flex;
    margin: 20px;
    border: 3px dotted navy;
    background:plum;
    flex-grow: 1;
}
.flex-item-1 {
flex-direction:column;
min-height: 100px;

}
.flex-item-2 {
    flex-direction: column;
    min-height: 200px;

}
.flex-item-3 {
min-height: 300px;
}

body{
    background-color: grey;
}

you gave the element the class flexbox-item-1 in the HTML but you used .flex-item-1 in the CSS.

removed the dot, but not working. Also here is my updated verion of code just two items.

<!doctype html>
<html>
<head>
<title> My warmup project</title>
<link href="./stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
      <div class="flexbox-container" >
         <div  class="flexbox-item flexbox-item-1">item 1</div>
         <div  class="flexbox-item flexbox-item-2">item 2</div>
         </div>
</body>
</html>

CSS

.flexbox-container {
    display: flex;
    background: yellow;
    flex-basis: 200px;
}
.flexbox-item {
    display:inline-flex;
    flex-direction:column;
    margin: 20px;
    border: 3px dotted navy;
    background:plum;
    flex-grow: 1;
}
flexbox-item-1 {
flex-direction: column;
}
flexbox-item-2 {
flex-direction: column;
}
body{
    background-color: grey;
}

The dot wasn’t the problem, that dot should be in the CSS.

Also, isn’t the flex-direction usually done for the flexbox container, not the items in it?

Then what is the problem?

Looking at your code, you have flex-grow: 1 on your flexbox-item, which is a class used for both of your items. This is causing them to equally take up “width space.”

1 Like

Thank you so much!!!

You’re welcome. I would also suggest you look at all of the “flexing” you have. Some of it is unnecessary due to the default styling of “flex.” If you look at your site with VSC and inspect it with Chrome Dev Tools, you can check and uncheck the CSS and see/test the changes that occur.

Actually I still cannot change individual items, though removing flex grow 1 and adding width worked for both items

do u mean click on inspect in my html page?

By using Run & Debug, yes. Just right-click on your live site and then click inspect. I’m not quite sure how you’re trying to style your items. What is it that you’re trying to do?

just creating different types of box shapes and sizes using flexbox. still individual items not styling or style not being applied. I am using a vs code on a chrome book


.flexbox-container {

display: flex;

flex-direction: row;

justify-content: space-between;

background: pink

}

.flexbox-item{

min-width: 200px;

min-height: 100px;

margin: 10px;

border: 3px solid rgb(0, 0, 0);

padding: 20px;

background: rgb(179, 23, 218);

}

.flexbox-item-1 {

min-height: 100px;

}

.flexbox-item-2 {

min-height: 100px;

}

.flexbox-item-3 {

min-height: 100;

}

body{

background-color: rgb(85, 85, 79);

}

<!doctype html>
<html>
<head>
<title> My warmup project</title>
<link href="./stylesheet2.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="flexbox-container">
        <div class="flexbox-item-1 flexbox-item-1">item 1</div>
          <div class="flexbox-item-2 flexbox-item-2">item 2</div>
            <div class="flexbox-item-3 flexbox-item-3">item 3</div>
            </div>
</body>
</html>

It appears that you have dual-classed each item with the same class, so this style is not having an effect.

it is ok to have double name in class elements i saw this in a video named css in 20 minutes, when speaker talked about it class and others.

You can have more than one class, yes. But what I was saying is that your classes were repetitive.

e.g.,

Instead of:
<div class="flexbox-item flexbox-item-1">

So, when you were trying to style with:

The style wasn’t working because none of your <div> had that class.

OMG T__T , I can finaly see my boxes, u saved my career. Thank you so much!

1 Like

Then, can I ask u pleaaaseee ., when does flex box start stretching and shrinking by default? I added display in another code but it is not shrinking and growing by default, maybe I should add flex grow or shrink??

.flexbox-container {
display: flex;
background: yellow ;
}
.flexbox-item {
    margin: 10px;
    border: 3px solid green;
    background-color: beige;

}
.flexbox-item-1 {
    height: 200px;
    min-width: 200px;
}
.flexbox-item-2 {
    height: 200px;
    min-width: 100px;
}

Sorry I got it I needed to add

my box was empty so no growing and shrinking.
suppose though that I need to design two tall boxes how can I keep the tall shape with its flexbox flexibility. I added max width but item completely stopped growing and shrinking

Are you asking how you would keep the containers tall? Like setting a height for them?