Flex layout

container

1. Make a container a Flex container

.container{ display:flex <! --or:inline-flex; -- > <! -- similar to the difference between block and inlineBlock -->}Copy the code

2. Change the flow direction of items flex-direction

.container{
   flex-direction:row | column |row-reverse  | column-reverse;
}
Copy the code
  • Row (default) : The main axis is horizontal and the starting point is on the left.
  • Row-reverse: The main axis is horizontal and the starting point is at the right end.
  • Column: The main axis is in the vertical direction, and the starting point is in the upper edge.
  • Column-reverse: the main axis is vertical and the starting point is at the bottom.

3. Change the unwrap flex-wrap

.container{
   flex-wrap:nowrap | wrap | wrap-reverse;
   
}
Copy the code

(1) NowRap (default) : no line breaks.

(2) Wrap: the first line is at the top.

(3) wrap-reverse: the first line is at the bottom.

  • The flex-direction and flex-wrap attributes are often used together, so there is an abbreviated flex-flow attribute. This abbreviated attribute takes the value of two attributes separated by a space.
  • For example, you can use flex-flow: Row wrap to set lines and wrap them automatically

4. Justify -content spindle alignment

  • The default axis is horizontal (unless you change the flex-direction direction)
  • When flex-direction has reverse, the flex-start and flex-end directions are also reversed.
  • Note that when Flex is in column orientation (with flex-direction changed), context-content controls vertical alignment and align-items controls horizontal alignment.
.container{
  justify-content:flex-start | flex-end;
  
}
Copy the code

(1)flex-start (default) : left-aligned (2) Flex-end: right-aligned (3) Center: centered (4)space-between: aligned at both ends with equal intervals between items. (5) Space-around: The space on both sides of each project is equal. As a result, the spacing between items is twice as large as the spacing between items and the border.

5. Align the sub-axis with align-item

  • The default secondary axis is the vertical axis
.container{
    align-items : flex-start | flex-end | center | baseline | stretch;
}
Copy the code

  • Flex-start: Alignment of the starting point of the cross axes.
  • Flex-end: alignment of ends of crossed axes.
  • Center: Alignment of the midpoint of the cross axis.
  • Baseline: The baseline alignment of the first line of text of the project.
  • Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.

6. Multi-line align-content

  • Property defines the alignment of multiple axes. This property has no effect if the project has only one axis
.container{
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Copy the code
  • Flex-start: align with the starting point of the cross axis.
  • Flex-end: aligns with the end of the cross axis.
  • Center: aligns with the midpoint of the intersecting axis.
  • Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes.
  • Space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.
  • Stretch (default) : Axis takes up the entire cross axis.

item

1. Add order to item

  • The little ones first, the big ones last
  • The default is 0
.item{
    order:1 | 100 | -1;
}
Copy the code

2. Add flex-grow to item

  • Control how you get fat. The default is 0, that is, if there is free space, it is not enlarged.
  • If all projects have a flex-Grow attribute of 1, they divide the remaining space equally, if any. If one project has a flex-grow attribute of 2 and all the other projects are 1, the former takes up twice as much free space as the other items.
.item{
    flex-grow: 1 ; /* default 0 */
}
Copy the code

3. flex-shrink

  • Define the scale of reduction.
  • The default is 1, which means that the project shrinks if there is insufficient space.
  • If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient
  • I usually write 0, so I don’t get thinner.
.item {
  flex-shrink: 1; /* default 1 */
}
Copy the code

4. flex-basis

  • Defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.
  • It can be set to the same value as the width or height attribute (such as 350px), and the project will take up a fixed space.
.item {
  flex-basis: <length> | auto; /* default auto */
}
Copy the code

Flex: flex-grow flex-shrink flex-basis

  • The default value is 0
  • There are two shortcut values: auto (1 1 auto) and None (0 0 auto).

6. align-self

  • Customize the align – items
  • Property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Copy the code

practice

  1. Navigation 2 column layout
  2. Content 3 column layout
  3. The average layout
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <header class="header"> <div class="logo"> <img src="https://static.xiedaimala.com/xdml/cdn/assets/white-logo-1a762b425df663fbccee710fe08d66951cea2fbc0a0350f03446ab3046 2 e739f. PNG "Alt =" "> < / div > < ul > < li > home page < / li > < li > class < / li > < li > discount < / li > < li > about < / li > < / ul > < header > < div class =" content "> <aside> one line has six words </aside> <main></main> <div class=" AD "></div> </div> <div class="imageList"> <div class="x"> <div class="image"></div> <div class="image"></div> <div class="image"></div> <div class="image"></div> <div class="image"></div> <div class="image"></div> <div class="image"></div> </div> </div> </body> </html>Copy the code
* { margin: 0; padding: 0; box-sizing: border-box; } img { max-width: 100%; } ul,ol { list-style: none; } .header { display: flex; /* border:1px solid black; */ /* justify-content: space-between; Margin-left :auto*/ * align-items: center; /* background: grey; padding:4px 0; } .logo { display: flex; /* img level */ align-items: center; }. Logo >img {height: 26px; vertical-align: middle; /* border: 1px solid black; */ } ul { display: flex; Margin-left: auto; margin-left: auto; margin-left: auto; border: 1px solid green; } ul>li { /* border:1px solid red; */ padding: 4px; Display :flex;} /*-- set aside width, set aside width, set aside width, set aside width; width:800px; margin-left:auto; margin-right:auto; } .content > aside{ background: #000; width:200px; } .content > main{ background: #666; height:400px; flex-grow:1; }.content >.ad{background: #999; width:100px; } /* average layout */. ImageList {/* border:1px solid green; */ width:800px; margin-left:auto; margin-right:auto; margin-top: 10px; } .imageList >.x{ /* border:1px solid blue; */ display:flex; flex-wrap:wrap; /* justify-content:space-between; */ margin-right: -12px; } .image{ border:1px solid red; width:191px; height:191px; background: grey; margin-right: 12px; }Copy the code

advice

  1. Do not overwrite width and height
  2. Using min-weight/max-weight/min-height/max-height/flex will do the job
  3. Flex works with margin-xxx: Auto

Write to death

width:100px;
Copy the code

Don’t write die

width:50% max-width:100px; width:300vw min-width:80%; Specific: no px, or Max min in front of itCopy the code

Practice games

flexboxfroggy.com/#zh-cn

reference

www.ruanyifeng.com/blog/2015/0…