CSS Flexbox

@Hoop11Jul 24.2021

![https://i.ibb.co/prf1VZg/Untitled.png](https://)

Hello, I don’t understand something about flexbox, as the image shows I used flexbox to arrange the different elements of a form, I declared display: flex only in the div that contains both label and input element and set a width of 200px for the label and width: 100% for the input element, but the thing is that I don’t understand why the label doesn’t reach 200px (image)?

Here’s the code:
HTML:
<div class=”container”>
<form class=”form”>
<div class=”form-group”>
<label for=”prénom”>Prénom* :</label>
<input
type=”text”
id=”prénom”
class=”input”
placeholder=”Entre ton prénom”
required
/>
</div>

CSS:
.container {
margin: 90px auto 0 auto;
width: 100%;
max-width: 690px;
background: rgba(255, 255, 255, 0.95);
padding: 3.5rem 3.5rem 1rem 3.5rem;
border-radius: 10px;
border: 3px solid #E18F5F;
}

.form {
width: 100%;
}

.form-group {
margin-bottom: 29px;
display: flex;
align-items: center;
}

.container .form .form-group label,
.container .form .form-group p {
width: 200px;
font-size: 1.3rem;
margin-right: 20px;
}

.container .form .form-group .input {
width: 100%;
height: 2.2rem;
padding: 0.375rem 0.75rem;
font-size: 1.1rem;
border: 1px solid #C1C3C2;
color: #495057;
border-radius: 4px;
transition: all 0.3 ease;
}

to post a comment

CSS

7 Comments(s) _↴

@SempervivumJul 24.2021 — #In order to avoid issues like this I recommend to be consequent and use the property flex instead of 100% for the input:

`flex: 1;`

When doing so, the label's width is exactly 200px for me and the input fills the remaining space.

@Hoop11authorJul 25.2021 — #@Sempervivum#1634668 Thanks a lot! I was using flexbox to align and center those elements but there was much more than that. One thing I am trying to do now while working on responsiveness, I tried to apply flex-shrink: 0 to the input element but it didn't work, also, I want to set a limit to it when it shrinks, is using min-width with flex-grow: 1; a good thing to do?

@SempervivumJul 25.2021 — #I myself experienced that the result of the layout is difficult to predict when mixing up (min-/max-)width with the flex properties. Instead I stick consequently to `flex: <grow> <shrink> <basis>

</C>. E. g. I replaced like this:
 <CODE>

<i>
 </i>            /* width: 100%; */
 /* max-width: 690px; */
 flex: 0 1 690px;<i>
 </i>

</CODE>
 Additionally, in order not to be confused by margin and padding falsifying the sizes I consequently use <C>

display: flex

</C>. This resulted in this CSS:
 <CODE>

<i>
 </i>        body,
 .container,
 form {
 display: flex;
 }
 
 .container {
 margin: 90px auto 0 auto;
 /* width: 100%; */
 /* max-width: 690px; */
 flex: 0 1 690px;
 background: rgba(255, 255, 255, 0.95);
 padding: 3.5rem 3.5rem 1rem 3.5rem;
 border-radius: 10px;
 border: 3px solid #E18F5F;
 }
 
 .form {
 flex: 1;
 /* width: 100%; */
 }
 
 .form-group {
 flex: 1;
 margin-bottom: 29px;
 display: flex;
 align-items: center;
 }
 
 .container .form .form-group label,
 .container .form .form-group input {
 /* width: 200px; */
 font-size: 1.3rem;
 margin-right: 20px;
 flex: 1 0 200px;
 min-width: 1px;
 }
 
 .container .form .form-group .input {
 /* width: 100%; */
 height: 2.2rem;
 padding: 0.375rem 0.75rem;
 font-size: 1.1rem;
 border: 1px solid #C1C3C2;
 color: #495057;
 border-radius: 4px;
 transition: all 0.3 ease;
 }<i>
 </i>

``
Using this, both, label and input, grow but do not shrink below a width of 200px.

@Hoop11authorJul 26.2021 — #This is what I was trying to achieve with the label and the input :

``<i>
 </i>.container .form .form-group label,
 .container .form .form-group p {
 font-size: 1.3rem;
 margin-right: 20px;
 flex: 1 0 100px;
 }
 
 .container .form .form-group input {
 flex: 20 0 250px;
 height: 2.2rem;
 padding: 0.375rem 0.75rem;
 font-size: 1.1rem;
 border: 1px solid #C1C3C2;
 color: #495057;
 border-radius: 4px;
 transition: all 0.3 ease;
 }<i>
 </i>``

You make items grow but don't shrink and give them a basis width. It is something I never would have thought of, thank you!

There is one thing if you could explain it more to me please, why do you make the whole page (body) as a flexbox? if I don't do so would there be problems?

in my opinion, setting the body as a flexbox is a problem, if I want to add other elements I will be forced to use flex-direction: column

@SempervivumJul 26.2021 — #>There is one thing if you could explain it more to me please, why do you make the whole page (body) as a flexbox? if I don't do so would there be problems?

The width being specified for a container is the width without margin, border and padding. If you add some margin, border and/or padding the complete width of the container grows accordingly. Often this is undesirable: When setting the width of an element to 100% you intend that it fills the container's width, however when there is margin/padding/border the container's width is exceeded.

There are three ways to prevent this:

1. Subtract margin/border/padding from 100% by CSS calc. This is fairly cumbersome.

2. Use `box-sizing: border-box;`

3. Use flex layout, then the browser will calculate the element's width that way that it fills the width of the container.

@Hoop11authorJul 26.2021 — #@Sempervivum#1634745 For now, I think I am gonna stick with box-sizing: border-box;, it's the easiest method, but flex properties flex-grow, flex-shrink, and flex-basis are definitely useful when it comes to arranging forms and make them responsive, I could learn that because of you, so I am very grateful, thanks a lot. By the way, there is no introduction section in this forum, I find it quite sad, is there another way to get a sense of community like a discord maybe?

@SempervivumJul 26.2021 — #You are right, there is no introduction section, however in "Etc" there is a subforum "Forum Feedback".

Also in #CSS _↴

border help needed What is this ? and my guess Problem with menu

Success!

Help @Hoop11 spread the word by sharing this article on Twitter...

Tweet This

CSS Flexbox

7 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS Flexbox

7 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #CSS _↴