An overview of

Before sharing with you are JS related things, and web front-end development, as we all know, is HTML CSS JS these three pieces, and these three pieces are closely linked, I have you, but with the increase of business, the development of the industry, JS in which the position is also more and more important, Because the front-end to deal with the logical part of the more and more, the industry to our front-end development of JS skills are increasingly high requirements

But whether the JS logic part is complex or simple, is more or less, we inevitably need to adjust our page layout, at this time will involve our CSS knowledge, at the same time personal so many years of development experience, private think sometimes tune up the style than write JS code even more trouble

Some time ago, I met a demand for a small program for voting. On the personal page, the name of the project is on the left, the content of the project is on the right and a small arrow pointing to the right. This is often seen on many mobile phone pages or apps. It’s usually right when it’s a single line, and left when it’s multiple lines, left to right when it’s a line break

Method 1: Flex layout

The first way is to use the most commonly used is also very powerful layout: Flex layout, about the flex layout of the relevant content, there is a need for friends to view my article to talk about flex layout, here is no more redundant, directly on the code:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta "> <title>Document</title> <style>. Box {display: flex; justify-content: flex-end; } < / style > < / head > < body > < div class = "box" > < div class = "item" > test word < / div > < / div > < / body > < / HTML >Copy the code

Here we set the display property of div.box to flex. That is, we give div.box a Flex context that applies to all direct subclasses of div.box. The width of div.item is the width of four words of its content test text. Add the parent element’s main axis alignment to flex-end (right-aligned) and the result is the element aligned to the right:

In order to facilitate the view of the effect, we chose the page rendered on the mobile terminal, otherwise it would be difficult to observe the multi-line situation. The following is the multi-line situation:

The width of a div.item is determined by its content. When there is so much content that the width of the div. Item is too wide for the parent element, there is no room for the parent element, and the main axis alignment is no longer effective. left; In this case, the content breaks naturally from left to right, thus fulfilling our requirements

Method two: inline elements

First let’s look at the code:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta < span style>. Box {text-align: left; text-align: center; right; } .item{ display: inline-block; text-align: left; } < / style > < / head > < body > < div class = "box" > < div class = "item" > test word < / div > < / div > < / body > < / HTML >Copy the code

Text-align defines how the contents of a line (such as text) are aligned relative to its block parent. It does not control the alignment of the block elements themselves, but only the alignment of the contents of the line

Several conclusions can be drawn from the above text:

  1. text-alignCan only be set in block-level elements
  2. text-alignUseful only for inline content of block-level elements

Div. Box is a block-level element by default. Setting text-align will apply to its inline content. We then set the display property of div.item to inline-block, so that div.item has both block-level elements and inline elements:

The inline element’s width does not span the parent element, but the width of the content. It is also affected by the parent element’s text-align, which means it is aligned right within the parent element

When the content fills it up, there’s no more room for the parent element, and the parent element’s text-align attribute is invalid. At this point, our div.item also has the characteristics of a block-level element, which makes its text-align attribute effective and allows it to control its own in-line content. That’s the alignment of the text inside it, so it’s left to right when it’s full and wrapped, and that’s what we need

conclusion

I personally ended up with the first method, which is flex layout, because flex layout is more flexible, in plain English, it can adjust itself according to the changes in the external container, and it provides a variety of alignment methods for us, clear and easy to use, text-align due to the characteristics of inheritance, So when we change the alignment, we need to reset the alignment to override the same attributes of the parent class, which is a bit cumbersome to write, and we also need to set the inline=block property, which may not work if the external element changes its display property. The Flex layout makes the display property of all direct subclasses a block, so you don’t have to worry about it

That’s all for this article, please feel free to ask any questions in the comments section. Finally, if you think this article is well written, don’t forget to give me a thumbs up, and if you think it’s helpful, click bookmark, just in case you need it

References:

  1. text-align