You want to align your content vertically with the width of your content.

As mentioned above, the width of the item expands to match the flec container, but
How do I adjust this to the "item" content width?

[html]

<!DOCTYPE html>
    <html>
      <head>
        <metacharset="utf-8">
        <title>Practice</title>
        <link rel="stylesheet" href="style.css">

      </head>

      <body>
    <div class="container">
        <p class="item">item</p>
        <p class="item">item</p>
        <p class="item">item</p>
    </div>


      </body>


    </html>

[css]

@charset "UTF-8";

*{
  margin:0;
  padding:0;
  text-align:center;
}

/* I want to line it up vertically to match the width inside*/
US>.container{
    display:flex;
    background:skyblue;
    justify-content:space-between;
    flex-direction:column;
}

.item{
    background:tomato;
    flex:01 auto;
}

html css

2022-09-30 21:24

2 Answers

 align-items:center

It's done!

2022-09-30 21:24

In .item

margin:0 auto;

How about adding

2022-09-30 21:24

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656