During the project development process, we often encounter some layout issues. A good layout can help you get more done later in the development process, and can even be used to solve the response problem.

The introduction of

Let’s say we want to implement a layout like this

<div class="box father">
  <div class="box_i son"></div>
  <div class="box_i son"></div>
  <div class="box_i son"></div>
</div>
Copy the code

Here, I set the common styles for.father and.son: the parent box uses a gray background color, the child box uses a green background color, and the border is dark green to make it easier to see the border. I’m going to use.box and.box_i for the actual layout

.father {
    width: 800px;
    height: 200px;
    background-color: #eeeeee;
    margin: 0 auto;
}

.son {
  height: 100%;
  background: #42b983;
  border: 1px solid # 148351;
  width: 25%;
}
Copy the code

Most traditional CSS layouts look like this:

.box{
  float:left; overflow:hidden; }. Box_i :nth-child(2){margin: 0 12.5%; }Copy the code

What is a clearfix? Clearfix is a common way to clear floats. When the parent element is standard level and the child element is floating level, the parent element loses height because the child element floats. The common approach is to give the parent element overflow: Hidden or use Clearfix.

// In the example above, we could have written:.box::after {content:"";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
Copy the code
// If you are using SCSS you can even write this useful method as a mixin @mixin clearfix {&::after {content:""; display: block; height: 0; clear: both; visibility: hidden; }} // Use.box{@include clearfix; }Copy the code

Back to the subject… As you can see, there are several problems with using a traditional layout

  • We need to know the widths of the parent and child elements to achieve this layout. But in many cases, we don’t get that width.
  • When using float, you must clear the float, otherwise you may have an impact on the subsequent layout.
  • If this layout needs to be improved to be responsive, it will most likely need to use @media media queries.

Flex layout

So, it’s time for us to bring out our heavyweight guest!! Flex stands for flex, but in CSS layouts, we call it an elastic layout. Ruan Yifeng has written two interesting articles on Flex, one on syntax and one on examples. A very detailed introduction is given here. Some of the pictures and principles mentioned in this article are taken from these two blogs. Thank ruan for sharing!! Flex’s browser compatibility is as follows:


Attributes that apply to the parent

display:flex;

This means that I’m going to use flex layout inside this element, which is equivalent to the js library init, for example. Flex can be used for both block-level elements and inline elements.

Note: When you use flex layout, float, clear, and vertical-align of all child elements of the element are invalidated.

flex-direction

Optional value: row | row – reverse | the column (the default) | column – reverse

  • If the customer originally needed to arrange such items vertically, we naturally used the default layout, which was fast and convenient. But one day the customer said: your vertical arrangement is too long, can you help me to change the horizontal arrangement. At this point, we need float:left; overflow:hidden; margin-left:10px; And so on. But with Flex, you only need to change one property. And the reverse is also true.
  • The default layout controls the spacing between items using margins, but it’s certainly not as good as Flex in terms of distance, which I’ll cover later.

flex-wrap

Optional value: nowrap (default) | wrap | wrap – reverse

  1. Nowrap: no newline


  2. Wrap: a newline
  3. Wrap-reverse: indicates the reverse line wrap

    This property diagram is already very clear, so there is no further explanation.

(To be continued)