HTML・CSS Writing 2022Introduction to flex layout
An introduction to layouts using HTML5 and CSS3 flex layouts.
The goal of this article is to help you understand and use flex layouts.
As an auxiliary goal, we aim to be simple in design without using the bug-stepping function of the flex layout. Flex layouts have a lot of bugs between browsers, so don't step on them.
The basic policy is to use width whenever you specify a width. Perhaps because width is calculated deterministically, it is highly compatible between browsers. Do not use calc division.
The goal is the optimal balance of convenience, readability, portability and simplicity.
Block element behavior by div
Before we first look at the effects of flex layouts, let's understand how divs work with block elements.
<div style = "background: #eef"> Grilled meat </div>
The block element stretches 100%horizontally. Let's understand this first. A div is a block element and by default stretches 100%horizontally.
Think of the CSS default value for a div as:
display: block; width: 100%;
Specify flex layout
Flex Layout Specifies "display: flex". What will happen?
<div style = "background: #eef; display: flex;"> Grilled meat </div>
What? Nothing happens.
In fact, "dispaly: flex" is different from "display: inline-block" and "display: inline" in that nothing happens to the element itself. For the element itself, think of it as having "display: block" specified.
Think of "display: flex" as having an effect on child elements. It seems that something is effective for yakiniku, but I can't confirm it as it is.
Effect of flex layout on child elements
Let's add a child element and see the effect of the flex layout. Let's compare it even if you don't use the flex layout.
No flex layout
Without the flex layout, the div is a block element, so the child elements are also 100%wide.
<div style = "background: #fee;">
<div style = "background: red;">
Grilled meat
</div>
<div style = "background: green;">
Yakitori
</div>
</div>
With flex layout
What happens if you use a flex layout?
<div style = "background: #fee; display: flex;">
<div style = "background: red;">
Grilled meat
</div>
<div style = "background: green;">
Yakitori
</div>
</div>
It looks as if you specified "display: inline-block" for the child element and left-justified it with a float. "Overflow: hidden;" is for releasing the float.
<div style = "background: #fee; overflow: hidden;">
<div style = "background: red; display: inline-block; float: left;">
Grilled meat
</div>
<div style = "background: green; display: inline-block; float: left">
Yakitori
</div>
</div>
Is there any difference? Is flex layout a syntax to write this easily?
The height of the child element with the maximum height is aligned with the height of other elements
The biggest nice thing about flex layouts is that the height of the child element is aligned with the height of the other elements.
It's difficult to write in words, so let's take a look. Try inserting a line break in one of the elements.
Flex layout
Oh, the heights are the same.
No. 1
<div style = "background: #fee; display: flex;">
<div style = "background: red;">
Yakiniku <br>
No. 1
</div>
<div style = "background: green;">
Yakitori
</div>
</div>
For example, when you want to line up a product image and title, you don't have to worry about line breaks.
Inline blocks and floats
Oh, the height is unfortunate. This is certainly not what you want.
<div style = "background: #fee; overflow: hidden;">
<div style = "background: red; display: inline-block; float: left;">
Yakiniku <br>
No. 1
</div>
<div style = "background: green; display: inline-block; float: left">
Yakitori
</div>
</div>
Set the width of the child element
Let's set the length for the grilled meat part and the yakitori part. The width of the grilled meat is 100px, and the width of the yakitori is other than that.
No. 1
<div style = "background: #fee; display: flex;">
<div style = "background: red; width: 100px;">
Yakiniku <br>
No. 1
</div>
<div style = "background: green; width: calc (100%-100px);">
Yakitori
</div>
</div>
What if there are other elements? It's a little tricky. Now that we have two elements, let's manually divide each number by two.
No. 1
<div style = "background: #fee; display: flex;">
<div style = "background: red; width: 100px;">
Yakiniku <br>
No. 1
</div>
<div style = "background: green; width: calc (50%-50px);">
Yakitori
</div>
<div style = "background: yellow; width: calc (50%-50px)">
salad
</div>
</div>
Wait a minute, why not use that "flex: 1"? Of course. However, "flex: 1" may behave differently between browsers, so this article explains how to avoid bugs.
Well, should I do "/ 2" when dividing by calc? Using division with calc may behave differently between browsers, so I try not to step on bugs.
Reverse the child elements
If you want to create a sidebar, you may want to reverse the position of the content and the position of the sidebar.
In such a case, "flex-directi"on: row-reverse; "is used. This setting is made for the element for which "display: flex" is specified.
It's in reverse order.
No. 1
<div style = "background: #fee; display: flex; flex-direction: row-reverse;">
<div style = "background: red; width: 100px;">
Yakiniku <br>
No. 1
</div>
<div style = "background: green; width: calc (100%-100px);">
Yakitori
</div>
</div>
Multi-line flex layout
The multi-line flex layout was explained in the following article.
What makes you happy with the flex layout?The biggest pleasure is that the heights of the child elements are automatically aligned.
What's wrong with flex layout?
A treasure trove of bugs between browsers. Knowledge that does not step on this is required.
To avoid flex layout bugs
The direct child elements of the flex layout do not use min-height and min-width
There is a bug in IE11.
Make the direct child element of the flex layout a div element
If you specify elements other than div such as img tag, button tab, fieldset tag, there is a bug in Edge / FF / Safari.
Do not use align-items
There is a bug in IE11.
Do not use flex-basis
There are many bugs between browsers.
Do not use flex: 1
There is a bug in IE11.
->