Adjust width to fill the free space with flex boxes

Question

I'm trying to adjust the width of a container if it can't add a character box.

IMAGE: Remove the extra right space by resizing the width

This is the HTML

    <section id="list_users">
        <div id="list_users_fill">
            <div class="character" id="me">
                <div class="user_img">
                    <img src="../../assets/images/avatar.jpg">
                </div>
                <div class="user_name">LUCA</div>
            </div>
            <div class="character" id="me">
                <div class="user_img">
                    <img src="../../assets/images/avatar.jpg">
                </div>
                <div class="user_name">LUCA</div>
            </div>
            <div class="character" id="me">
                <div class="user_img">
                    <img src="../../assets/images/avatar.jpg">
                </div>
                <div class="user_name">LUCA</div>
            </div>
            <div class="character" id="me">
                <div class="user_img">
                    <img src="../../assets/images/avatar.jpg">
                </div>
                <div class="user_name">LUCA</div>
            </div>
            <div class="character" id="me">
                <div class="user_img">
                    <img src="../../assets/images/avatar.jpg">
                </div>
                <div class="user_name">LUCA</div>
            </div>
            <div class="character" id="me">
                <div class="user_img">
                    <img src="../../assets/images/avatar.jpg">
                </div>
                <div class="user_name">LUCA</div>
            </div>
            <div class="character" id="me">
                <div class="user_img">
                    <img src="../../assets/images/avatar.jpg">
                </div>
                <div class="user_name">LUCA</div>
            </div>
            <div class="character" id="me">
                <div class="user_img">
                    <img src="../../assets/images/avatar.jpg">
                </div>
                <div class="user_name">LUCA</div>
            </div>
            <div class="character" id="me">
                <div class="user_img">
                    <img src="../../assets/images/avatar.jpg">
                </div>
                <div class="user_name">LUCA</div>
            </div>
            <div class="character" id="me">
                <div class="user_img">
                    <img src="../../assets/images/avatar.jpg">
                </div>
                <div class="user_name">LUCA</div>
            </div>

        </div>
    </section>

And there the CSS

main {
  background: #F5F5F5;
  margin: 20px;
  -webkit-box-shadow: 0 3px 15px 1px rgba(0,0,0,0.05);
  box-shadow: 0 3px 15px 1px rgba(0,0,0,0.05);
  border-radius: 7px;
}

#list_users {
  background: #684D43;
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(51, 51, 51, 0.1) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(252, 252, 252, 0) 100%);
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(51, 51, 51, 0.1) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(252, 252, 252, 0) 100%);
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(51, 51, 51, 0.1) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(252, 252, 252, 0) 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(51, 51, 51, 0.1) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(252, 252, 252, 0) 100%);
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
  border-radius: 7px;
  padding: 10px;
}

#list_users > div {
  background-color: rgba(0,0,0,0.3);
  border-radius: 7px;
  -webkit-box-shadow: inset 0 -1px 3px 3px rgba(0,0,0,0.1);
  box-shadow: inset 0 -1px 3px 3px rgba(0,0,0,0.1);
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto !important;
  padding: 0 10px 10px 10px;
}

.character {
  width: 80px;
  height: 100px;
  background: #684D43;
  border-radius: 3px;
  text-align: center;
  color: #E1DED1;
  text-shadow: 0px 1px 0px rgba(0,0,0,0.6);
  text-transform: uppercase;
  font-weight: bold;
  line-height: 27px;
  margin: 10px 10px 0 0;
}

.user_img img{
  margin-top: 3px;
  width: 70px;
  height: 70px;
  border-radius: 3px;
}

But a tried everything finding some about flex box or width property. I don't know if is it possible but I don't think. I'm just losing some details that can help me. Let me know, thanks!

score 0 · Answer 1 · answered Mar 19 '20 at 16:12

0

If you are trying to make the images have even space and appear aligned in the centre try the following: justify-content: space-evenly

answered Mar 19 '20 at 16:12

Seiont

59
8

This is not what I want, I need that the width of the box containing this character is resized. – Frostman Mar 19 '20 at 16:31
Have you tried using the width as a percentage? I don't fully understand your question sorry. Maybe you can try using media queries – Seiont Mar 19 '20 at 16:37
Okay, I'm trying to show what I want by these images: https://i.imgur.com/tZ63iL0.png https://i.imgur.com/YuGjebg.png https://i.imgur.com/HBvO7Ym.png Can you see the different spaces on the right? I need to resize the box to don't have these spaces – Frostman Mar 19 '20 at 16:45
Try putting the containers holding each image to have a width as a percentage. Then I would try using justify-content: space-evenly. Hope this helps. – Seiont Mar 19 '20 at 16:53

score 0 · Answer 2 · answered Mar 19 '20 at 16:12

0

A way to solve it is to use flex: 1, min-width and max-width.
So, you can adjust it better the way you want.

.character {
    min-width: 80px;
    max-width: 100px;
    flex: 1;
    height: 100px;
    background: #684D43;
    border-radius: 3px;
    text-align: center;
    color: #E1DED1;
    text-shadow: 0px 1px 0px rgba(0,0,0,0.6);
    text-transform: uppercase;
    font-weight: bold;
    line-height: 27px;
    margin: 10px 10px 0 0;
}

answered Mar 19 '20 at 16:12

Azametzin

5,223
12
28
46

I need that the width of the box containing this characters is resized without leave that right space in excess every time that I resize the page. – Frostman Mar 19 '20 at 16:33
If you check the answer marked as duplicate, it seems not possible, but since you are using fixed widths, maybe media queries can work for you, even if it is a bit verbose. – Azametzin Mar 19 '20 at 16:50

Adjust width to fill the free space with flex boxes

2 Answers2