The simplest form implementation of Flexbox layout

Flexible layout (Flexbox) is becoming increasingly popular and more and more people are using it because it is so convenient to write CSS layouts.

Three years ago, I wrote an introduction to Flexbox (above, below), but it was a little unclear. Today, I saw a tutorial and realized that a simple form can explain Flexbox, and the content is very practical.

Below, you only need 10 minutes to learn simple form layout.

1. <form> element

Forms use <form> element.

<form></form>

Above is an empty form. According to the HTML standard, it is a block-level element and will take up the full width by default, but will have a height of 0 since it has no content.

2. Form Controls

Now, add the two most commonly used form controls.

<form>
  <input type="email" name="email">
  <button type="submit">Send</button>
</form>

In the code above, the form contains an input box ( <input> ) and a button ( <button> ).

According to the standard, both controls are inline-block elements, that is, they are placed side by side on a line by default.

The above picture shows the default rendering of this form by the browser (except for the color). You can see that there is a 3-4 pixel interval between the two controls, which is specified by the browser's built-in style.

3. Specifying Flexbox layout

Next, specify that the form should use Flexbox layout.

form {
  display: flex;
}

As you can see, the space between the two controls disappears because elastic layout items have no space by default.

4. flex-grow attribute

Two places are worth noting.

(1) The width of the two control elements did not change because the elastic layout does not change the width of the items by default.

(2) The elastic layout is left-aligned by default, so the two controls will be arranged from the beginning of the row.

If we want the input box to occupy all the remaining width of the current line, we only need to specify flex-grow property of the input box to be 1 .

input {
  flex-grow: 1;
}

In the image above, the button width has not changed, but the input box has become wider, equal to the width of the current row minus the width of the button.

flex-grow property defaults to 0 , which means the original width is used without stretching. When it is equal to 1 , it means that the item width is stretched to occupy all the remaining width of the current row.

5. align-items property

Let's make a slight change and insert an image into the button.

<form action="#">
  <input type="email" placeholder="Enter your email">
  <button type="button"><svg> <!-- a smiley icon --> </svg></button>
</form>

After the button was inserted into the image, its height changed and became taller. At this time, a very wonderful thing happened.

In the picture above, the button becomes taller, and the input box automatically becomes the same height!

As mentioned earlier, the elastic layout does not change the width of the item by default, but it changes the height of the item by default. If an item does not explicitly specify a height, it will take up the entire height of the container. In this example, the button becomes taller, causing the form element to also become taller, causing the input box to automatically stretch in height.

align-items property can change this behavior.

input {
  flex-grow: 1;
  align-self: center;
}

align-items property can take four values.

• flex-start: top edge aligned, height not stretched
• flex-end: bottom edge aligned, height not stretched
• center: centered, height not stretched
• stretch: default value, height automatically stretched

If there are many items, it is troublesome to set align-self property one by one. At this time, you can set align-items property on the container element (the form in this case), and its value will be inherited by align-self property of all child items.

form {
display: flex;
align-items: center;
}

In the above code, after setting align-items on the <form> element, there is no need to set align-self on the control unless you want the two values ​​to be different.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.