How to align flex box items to border

HTML & CSS
1

image
image734×570 66.3 KB

I want the items to be align with the black border.

I did space between and didn’t do anything.

2

.CONTS should be .conts

2 Likes
3

You may wish to set left and right margins of the boxes to zero and use gap declaration:

.conts {
  display: flex;
  justify-content: space-between;
  gap:20px;
}

.box {
  margin: 10px 0;
}
2 Likes
4

are there any other methods to align or just that?

5

and also, Why didn’t space between work resulting in doing your method?

6

@Growly , an alternative to doing this

.box {
  margin: 10px 0;
}

would have to set the box-sizing model for all elements. What this line does is includes the border into the sizing of all elements. By default, borders are not included in the width calculations and apply in addition to any specified widths.

I like doing this because it makes calculating widths that much easier. If the element says it’s 600px wide, it’s 600px wide. Not 600px + 10px of border on each side which means it’s actual 620px wide;

* {
    box-sizing: border-box; 
  }

image
image927×734 42 KB

The MDN page has a good explanation of the behavior with clickable examples

2 Likes
7

You could use old-fashioned CSS or use CSS Grid.

justify-content only controls how any spare space is distributed. So justify-content: space-between does not force there to be space between items. That’s why I have suggested you use the gap declaration. Your three items in the flex container grow and shrink so there is no spare space.

Put, for example max-width: 200px; in your CSS for your ‘box’ class and you will see spare-between working. Then change space-between to space-around and you will see the difference.

A word of warning about using space-between: if one item in the container wraps onto another row, it will appear on the left, not centralised. I understand this current specification of CSS is under review.

3 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.