There are a lot of flex layout related content in the website or other websites. This article aims to record some of the content biased to the requirements, some of the application level content, grammar aspects of the content can be viewed by Ruan Yifeng teacher’s blog, I think it is quite detailed:

Reference article:

Flex Layout Tutorial: Syntax section

Example Flex layout

Also, if you don’t know much about Flex layout, it is recommended that you read the two reference articles above and then review this article for specific requirements or details, so let’s get started

flex-basis

There are two things we need to remember about this property

  1. It will take precedence overwidthandheight
  2. The specific final render result iswidthorheightDepends on ourflex-directionwhenflex-directionA value ofrowWhen it renders the result iswidthAnd vice versa forcolumnWhen isheight

Here’s an example:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width, initial-scale=1.0"> <title>flex-basis</title>. 800px; height: 800px; display: flex; } .box1{ width: 200px; height: 200px; background: #f00; } .box2{ flex-basis: 400px; width: 200px; height: 200px; background: #0f0; } </style> </head> <body> <div class="container"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>Copy the code

Flex-direction: column; The result is:

Flex-basis renders the value height

Elements are stretched (self-regulating attributes)

After watching Ms. Winter’s geek time class, I learned that this is a kind of behavior of “adjusting oneself to the external environment”, which is why flex layout is better

For example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>元素被拉长</title>
  <style>
    .container{
      width: 800px;
      height: 800px;
      display: flex;
    }
    .box1{
      width: 200px;
      height: 200px;
      background: #f00;
    }
    .box2{
      width: 200px;
      background: #0f0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</body>
</html>
Copy the code

Box1 renders 200×200, box2 does not set height, and it renders 200×800.

  <style>
    .container{
      width: 800px;
      height: 800px;
      display: flex;
      flex-direction: column;
    }
    .box1{
      width: 200px;
      height: 200px;
      background: #f00;
    }
    .box2{
      height: 200px;
      background: #0f0;
    }
  </style>
Copy the code

The render result becomes:

As you can see,Adjust yourself to the external environmentThis feature is more than just use and ownflexthisdisplayThe parent of the context, the same goes for the child of the parent, and this is where the property being changed isCross shaftProperties in the direction, for example

  • The first exampleflex-directionNo explicit setting, then its default value isrowWhat can be regulated and changed at this time isheight
  • On the contrary, the second exampleflex-direction: column;And what is being regulated iswidth

Application of self-regulating attributes

You can also set a height for the parent div of the A tag. After flex, the A tag will hold the parent and be the same height as the parent

Dad display:flex, son has a picture, set the height of the picture like 30px:

The son is now as tall as the tallest of his brothers:

In this case, p is not high, so it is the height of the highest element. The highest element here is the parent element div, 54px, so the height of the P element is 54px. In addition, the height of the input button is set by themselves, and the margin of P is evenly divided at this time

Solution 1

Height: xx% for the blue box, or vw for mobile

Solution 2

Since the child element will be pulled to the same height as the parent box, give the parent box a height. If the child element has many margins, give margin 0 to solve the problem:

Give amargin 0And then there you go:

The text-align attribute is invalid

Flex layout affects text-align:

At this point, if I were todisplay:flex;After removingtext-align:right;It will work normally:

After the parent sets display:flex, the float clear vertical-align property of the child element is invalid, as is the text-align property here

Two elements one in the center and one to the right

CSS uses ootstrap 2.x grid system, with media queries and percentages as units. It works well. Use Flex layout for both the large box and the two sub-boxes, and use Flex-end for the arrangement of elements in both sub-boxes

Flex-wrap :wrap;

By default, projects are arranged on a line (also known as an “axis”). The flex-wrap property defines how to wrap a line if an axis does not fit:

  • nowrap(Default) : no line breaks
  • wrap: newline, first line above
  • wrap-reverse: newline, first line below

The child element is too wide for the parent element, so it wraps at some point. If the child element is not set to the width, it wraps at the end of the parent element by default. That is, the larger the width, the sooner the child element wraps

Two elements one to the left and one to the right

I didn’t understand Flex very well at the time of development, so I had this record, and I ended up with the context-content: space-between setting; Can be

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title>Document</title> <style type="text/css"> .box{ display: flex; flex-basis: 100vw; justify-content: space-between; } </style> </head> <body> <div class="box"> <div class="item">1</div> <div class="item">2</div> </div> </body> </html>Copy the code

Flex-basis defines the main size of the project’s main space before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. The default value is auto, which is the original size of the project. If the value is set to a small value, the distance between the two is correspondingly smaller:

The element shrinks to half its width

Parent:

Child elements:

Now the child is the width of the screen – white on both sides, no problem, when the parent set display:flex; After:

The width of the child element is changed to the parent element without display:flex; And then half the width

Beyond content ellipsis

PC

DOM structure

The parent element

Left image, fixed width, height and right margin

The box on the right should have a percentage fixed width, not a flex property like 0, 0, auto or something like that, otherwise it would be elastic and it wouldn’t work, right

It’s a legacy to see another box between the nickname and the box to the right, because there was a box to the right of the nickname before, so it looks like this

Mobile terminal

The layout of the mobile end is the same as that of the PC end, but why does it exceed the percentage

Once you change the width, you’re done

And if it is width:calc(100%-50px); The size of the image is compressed, so absolute width is better: screen width reduces the width of the image and the right margin, as well as the white space on both sides of the screen

On the flex: 1; And flex: auto;

For example, if you have an element that needs to be filled automatically, then you have a line of text following it:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
Copy the code

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
Copy the code

At this point the flex: 1; Flex: Auto; No, flex-basis: auto; Represents the space occupied by the project is the space of the project itself, which needs to be reduced and changed

If you find this article useful to you, please give me a thumbs up, click a favorite, and hope there is no code too hard to write, no requirements too hard to implement