2

I am having an issue where I am trying to use flex to show divs left, center, and right. Although I run into an issue where the center column isn't in-line with the div above it. When I change the flex to flex: 1, it does put each column in line but leaves an empty space to the right of my furthest right div. Can someone offer some advice or tips on how to correct this? I have seen similar questions about flex, but nothing the specifically addressed this concern. I have provided some of the code I am using currently. Thank you in advance!

.container {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.item {
    flex: 1;
}
<body>
    <div class="container">
        <div class="item">Hello World</div>
        <div class="item">It is me</div>
        <div class="item">BYE</div>
    </div>
    <div class="container">
        <div class="item">Hello World, again!</div>
        <div class="item">It is me, again?</div>
        <div class="item">BYE</div>
    </div>
</body>
KarelG
  • 5,176
  • 4
  • 33
  • 49
jrseriel
  • 69
  • 2
  • 7

5 Answers5

1

You need to swap

justify-content: space-between;

for

justify-content: space-around;

Working Example:

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

.item {
    flex: 1 1 33%;
    margin: 6px;
    padding: 6px;
    color: rgb(255,255,255);
    background-color: rgb(255,0,0);
    font-weight: bold;
}
    <div class="container">
        <div class="item">Hello World</div>
        <div class="item">It is me</div>
        <div class="item">BYE</div>
    </div>
    <div class="container">
        <div class="item">Hello World, again!</div>
        <div class="item">It is me, again?</div>
        <div class="item">BYE</div>
    </div>
Rounin
  • 27,134
  • 9
  • 83
  • 108
0

If I understood the question correctly:

.item {
      flex: 1;
      text-align: center;
}

If you instead mean centering the entire div, use:

.container {
    margin: 0 auto;
}
Krystian Borysewicz
  • 784
  • 10
  • 23
0

I hope your code is working correctly, just applied background and observed there is no space after the right most div

Refer this bootply http://www.bootply.com/T0TTJD1kTO

rtvalluri
  • 557
  • 2
  • 6
  • 22
0

Please check the code. There is no empty space on right. padding: 10px for body and .container have margin-bottom: 30px; also .item have margin-bottom: 10px;. I think you need to learn more about the flex box.

body
{
    margin: 0;
    padding: 10px;

    background-color: #898989;
}
.container
{
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;

    margin-bottom: 30px;

    border: 2px solid #000;

    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
       -moz-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
       -moz-box-pack: start;
    -ms-flex-pack: start;
            justify-content: flex-start;
}

.container .item
{
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;

    margin-bottom: 10px;

    border: 5px solid #f0f;

    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
       -moz-box-flex: 1;
    -ms-flex-positive: 1;
            flex-grow: 1;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
    -ms-flex-pack: center;
            justify-content: center;
}
<body>
     <div class="container">
      <div class="item">Hello World</div>
      <div class="item">It is me</div>
      <div class="item">BYE</div>
    </div>
    <div class="container">
      <div class="item">Hello World, again!</div>
      <div class="item">It is me, again?</div>
      <div class="item">BYE</div>
    </div>
   </body>
Rahul
  • 2,011
  • 3
  • 18
  • 31
0

Instead of flex:1 you can use opacity:0.99 on child items, it will solve your Issue.

Here is an link to fiddle:

    .item {
       opacity: 0.99;
   }

It's because all the child has same name, it's creating some problem.

Other Way to solve this is simply remove flex:1 or remove .item in css, it will automatically resolve it.

Here is working example of that in my Fiddle, you can check it.

https://jsfiddle.net/ABhimsaria/z7a4b7jo/

It's important to remember the initial settings of a flex container.

Some of these settings include:

flex-direction: row - flex items will align horizontally.

justify-content: flex-start - flex items will stack at the start of the line on the main axis.

align-items: stretch - flex items will expand to cover the cross-size of the container.

flex-wrap: nowrap - flex items are forced to stay in a single line.

flex-shrink: 1 - a flex item is allowed to shrink

Note the last setting.

Because flex items are allowed to shrink by default (which prevents them from overflowing the container), the specified flex-basis / width / height may be overridden.

For example, flex-basis: 100px or width: 100px, coupled with flex-shrink: 1, will not necessarily be 100px.

To render the specified width – and keep it fixed – you will need to disable shrinking:

div {
   width: 100px;
   flex-shrink: 0;
}  
OR

div {
  flex-basis: 100px;
  flex-shrink: 0;
}
OR, as recommended by the spec:

flex: 0 0 100px;    /* don't grow, don't shrink, stay fixed at 100px */

Some Cool Useful Links to know in-depth about flex and to play with them are:

http://flexboxfroggy.com/

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

Center and bottom-align flex items

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Community
  • 1
  • 1
Abhishek Agarwalla
  • 322
  • 4
  • 16