Before reading the article, let’s look at two examples. This is the most common layout we use on projects.

Case 1: Multiple containers arranged horizontally at the same spacing.

Case 2: Common menu navigation

When you see these two cases, you can briefly think about how to achieve the usual, many students should answer like this.

/ / case a < div class = "demo" > < div class = "item" > < / div > < div class = "item" > < / div > < div class = "item" > < / div > < / div >. The demo { padding: 1em 0; width: 470px; background-color: #e5e5e5; overflow: hidden; } .item { float: left; margin-left: 10px; width: 150px; height: 100px; background-color: #fff; border: 1px solid #999999; box-sizing: border-box; } .item:first-child { margin-left: 0; } / / second case < div class = "demo2" > < a href = "" class =" nav "> navigation 1 < / a > < a href =" "class =" nav "> navigation 2 < / a > < a href =" "class =" nav "> 3 < / a > navigation  </div> .demo2 { width: 200px; background-color: cadetblue; } .nav { display: block; width: 100%; border-bottom: 1px solid #000; color: #fff; }Copy the code

We did it, but you fixed all the pixels here.

For example, in the first example, the width of the parent container is 470 = 3*150 + 20. What’s a good way to make three elements fit screen widths without using Flex layout?

Or if you want to expand from three elements to four, you need to manually calculate the width of each element. That seems like a lot of trouble.

Today, let’s talk about how to use the “flow” feature to solve some layout problems encountered in the project.

When we first started learning ABOUT CSS, we heard a lot about the concept of “document flow.” Most people don’t really understand what document flow is.

So what is “document flow”?

The document flow

Document flow: guides the arrangement and layout of elements in a web page. Its default orientation is left to right and top to bottom.

One of the biggest features of flow is its adaptability. You can think of it like a stream of water, when it pours into a container, it automatically fills the container. Document flow in CSS, on the other hand, behaves identically.

Not only that, but you’ll hear a lot about “out of flow”, such as floating, absolute positioning, etc. Out of flow is not the focus of this article, so I won’t go into more details. Today, I’ll focus on “adaptive flow”.

There are two important concepts in document flow: block-level elements and inline elements. The most representative elements are

and
.

Block-level elements fill the screen and are adaptive by default, while inline elements are horizontal by default.

You can think of block-level elements filling the container like a stream of water, whereas inline elements are objects floating in the water arranged from left to right.

The display: block property is often encountered in projects. Note, however, that it is not the same thing as a block-level element. Display: table, also a block-level element.

Loss of liquidity

By this point you should be aware of the nature of streaming. Many people are aware of the concept of “document streaming”, but they don’t use it well enough to create unnecessary problems for themselves.

For example, I used to write CSS like this:

span {
    display: block;
    width: 100%;
}
Copy the code

Width: 100%; This attribute is superfluous because block-level elements fill containers automatically by default in a flow layout.

Have you ever written CSS like this? Feel free to share your questions in the comments section.

But if you add just one more attribute, you’re adding a line of code that’s not so neat, but it’s not always that simple.

Once you add width to an element, it loses fluidity, even if it is 100%.

Yes, you read that right, as soon as it has the width property, it loses its most awesome liquidity. Then it becomes worthless.

For example, in the navigation case at the beginning, if you add some margins to the navigation. There will be a bad effect.

.nav { display: block; padding: 10px; // Add margin width: 100%; border-bottom: 1px solid# 000;
  color: #fff;
}
Copy the code

If we remove the width attribute, we get a perfect display.

.nav {
  display: block;
  padding: 10px;
  border-bottom: 1px solid # 000;
  color: #fff;
}
Copy the code

You may not have realized before, but adding the width attribute can do a lot of damage.

But after reading this article, you should be aware of the damage that width can do to liquidity, and try to use less width, or even “no width”.

Before this, I believe that many partners encountered the situation of exceeding the width in the project summary, but few people explored it, so many people would give full play to their special computing ability and write the following code.

.nav {
  display: block;
  padding: 10px;
  width: 180px; // 200px - 10px*2
  border-bottom: 1px solid # 000;
  color: #fff;
}
Copy the code

It seems to work, but the downside is that it’s so fixed that you have to recalculate any changes you make.

Some people might say, dude die, my computing skills are amazing, what do you care? Well, I lose the wave.

So why does adding the width property exceed, but not adding the width property?

It turns out that when the element doesn’t set the width property orWidth: autoMargin, border, and padding can be allocated automatically.

Once we set a fixed width property, even at 100%, it will be evaluated according to the CSS box model. Thus losing the fluidity of automatic allocation of space.

As for the details of how to calculate it, the width is different depending on the box model, so it contains different things. No more details.

Dude die, now you know how awesome “no width” is.

Because I’m talking about the box model here, you might think, well, wouldn’t you just change the box model? For example, let’s do this:

.nav {
  display: block;
  padding: 10px;
  width: 100%;
  border-bottom: 1px solid # 000;box-sizing: border-box; // Change the box model color:#fff;
}
Copy the code

Yes, it works in this case, but if you want to achieve the horizontal spacing problem in case 1, it’s a bit of a stretch.

Since the CSS box model does not count margins, horizontal alignment is easy to achieve, but it is more difficult to achieve the same spacing.

At this point you can try to take advantage of the flow properties to implement the solution well.

The width of the separation

At this point, we can use the characteristics of flow to carry out width separation.

<div class="demo"> <div class="item"> <div class="child"> content </div> < / div > < div class = "item" > < div class = "child" > content < / div > < / div > < div class = "item" > < div class = "child" > content < / div > < / div > </div> .demo { padding: 1em; background-color: #e9e9e9; overflow: hidden; } .item { float: left; width: 25%; } .child { margin: 0 10px; padding: 10px; border: 1px solid #ccc; }Copy the code

You’ll notice that no matter how you change its margin, padding, or border, it will automatically fill in the allocated space, and will no longer be out of place, out of place, etc.

That’s how you make your layout simple and flexible by taking advantage of the features of flow. Of course, the nature of flow is not limited to these two layouts.

For example, the layout of forms, usually form layout is more difficult to deal with a point, at this time you might as well try using the “no width”, “width separation” principle to try, may have new discoveries. Let your imagination run wild, boys.

Finally, if you think the article is good and enlightening to you, “like” is a kind of attitude and recognition.

Wechat official number: Six small dengdeng, more dry goods articles, here are a lot of my stories, welcome to exchange.

Reference: CSS World