• 0
Copy Link

How to make flexbox items the same size?

I want to use flexbox that has some number of items that are all the same width. I've noticed that flexbox distributes the space around evenly, rather than the space itself.

 

.header {
  display: flex;
}

.item {
  flex-grow: 1;
  text-align: center;
  border: 1px solid black;
}

<div class="header">
  <div class="item">asdfasdfasdfasdfasdfasdf</div>
  <div class="item">z</div>
</div>

  Topic Computer Software & Hardware Subtopic Computer Programming Tags flex css
3 Years 1 Answer 2.0k views

Chayan Biswas

Knowledge Areas : Mentoring, Choosing a Career, Getting Promoted, Windows O/S, Mac O/S, General Computer Questions, WiFi Questions, Networking (deprecated and moved to "Internet Connectivity"), Graphic Design, User Experience (UX), Architecture

Reputation Score: 90

Related Questions
Answer this Question

Submit An Answer

Answers ( 1 )

 
  1. Atik Shakil 45

    .flex-container {
      display: flex;
      flex-wrap: nowrap;
      background-color: DodgerBlue;
    }

    .flex-container > div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }

    You can try this

    UTC 2021-04-02 07:22 PM 6 Comments

To answer this question, you must be logged in.

Create an account

Already have an account? Login.

By Signing up, you indicate that you have read and agree to Sage's Terms and Conditions and Privacy Policy