FLEXBOX(Flexible box layout model) and applicable scenarios?
directory
- background
- Knowledge of anatomy
- Q&A
- The solution
- Coding of actual combat
- Expand the thinking
- reference
- More discussion
1. Background
What is the FLEX layout?
In 2009, the W3C introduced a new layout scheme, —-Flex layout, that enables easy, complete, and responsive implementation of a variety of page layouts. It is currently supported by all browsers, which means it is safe to use it now.
2. Knowledge analysis
How to use FLEX layout
The Flex layout is so flexible that any container can be specified as a Flex layout. Blocks only need the display property specified as flex. Inline elements can also be specified as flex layouts, with the display property set to inline-flex. Browsers with A WebKit kernel need to be prefixed with -webkit. Note that when set to flex layout, float, clear, text-align, and vertical-align child elements are invalidated.
Second, basic concepts
- Any flex layout element is called a Flex – – contain, and all its children are flex items.
- The container has two axes by default, a main axis and a cross axis.
- By default, projects are arranged along the main axis, and the main space occupied by individual projects is called main
- Size, the cross axis space occupied is called cross size.
FLEX-BOX container properties
Flex-box (container) and Flex-item (item) each have different attributes. Adjust the overall layout by setting them differently to achieve the desired effect.
The main properties of a Flex-box container are:
- Flex-direction determines the alignment of items on the main axis.
- Flex-wrap determines how to wrap a line if an axis doesn’t fit.
- Flex-row is short for flex-direction and wrap. The default is row nowrap.
- Context-content determines how items are aligned along the main axis.
- Align-items determines how items are aligned on the cross axis.
- Align-content defines how multiple axes are aligned.
FLEX-DIRECTION
The flex-direction attribute determines the DIRECTION of the main axis (that is, the alignment of items).
- flex-direction: row; Represents the default value, with the main axis in the horizontal direction, left to right.
- flex-direction: row-reverse; The principal axis is in the horizontal direction, right to left.
- flex-direction: column; The principal axis is in the vertical direction, from top to bottom. This changes the order of items from left to right on the X-axis to top to bottom.
- flex-direction: column-reverse; The principal axis is in the vertical direction, and again, invert it, from the bottom to the top.
FLEX-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.
- flex-wrap: nowrap; It is also the default value for this property, indicating no line breaks, scaling of items, etc. (if flex-shrink is not specified to 0).
- flex-wrap: wrap; Represents a newline with the first line at the top.
- flex-wrap: wrap-reverse; At this point, it will also break the line, but the first row will go down.
FLEX-FLOW
The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is ROW NOWRAP.
flex-flow: flex-direction || flex-wrap;
The context-content attribute defines the alignment of items on the main axis.
- Flex-start: Also the default value for this property, indicating spindle start alignment.
- Flex-end: spindle end alignment
- Center: a center
- Space-between: both ends are aligned with equal intervals between items.
- Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.
ALIGN-ITEMS
The align-items property defines how ITEMS are aligned on the cross axis.
- Flex-start: Is also the default value for this property, indicating cross axis start alignment.
- Flex-end: Cross axis end alignment
- Center: a center
- Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.
- Baseline: The baseline alignment of the first line of text of the project.
ALIGN-CONTENT
The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis.
- Flex-start: align with the starting point of the cross axis.
- Flex-end: Cross axis end alignment.
- 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 baseline alignment of the first line of text in a project.
- Stretch (default): Axis takes up the entire cross axis.
FLEX project properties
The Flex project also has six properties. The attributes of the project are:
- Order determines the order in which items are sorted. The lower the value, the higher the order.
- Flex-grow determines the size of the project. The default value is 0, which means there is free space and no size.
- Flex-shrink is a method of determining the size of a project. The default value is 1, which indicates that the amount of space left is equal to that of the project. If necessary, the value can be set to 0.
- Flex-basis defines the amount of principal axis space that an item occupies before allocating extra items. 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.
- Flex is short for the above three, default 0, 1 auto, that is, do not zoom, do not zoom, take up the main axis of the project size. This property has two quick values: auto (1 1 auto) and None (0 0 auto), which I won’t repeat here.
- The align-self attribute defaults to auto, inheriting the flex container’s align-items attribute from the parent element. Items, like algn-items, only determine the alignment of individual items to the cross axes. #3. FAQ Display: Can Flex be combined?
4. Solutions
And the answer is yes, an element can be a child of one display and a parent of another display.
5. Code practice
<! DOCTYPE html> <html> <head> <meta charset="utf-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no"> <title>flex </title> <style> body {display: flex; /*flex-direction: column; */ /*flex-wrap: wrap; */ /*flex-wrap: wrap-reverse; */ /*justify-content: flex-start; */ /*justify-content: flex-end; */ /*justify-content: center; */ /*justify-content: space-between; */ /*justify-content: space-around; */ /*align-items: center; */ /*align-items: flex-start; */ /*align-items: flex-end; */ /*align-items: baseline; */ /*align-content: center; */ /*align-content: space-between; */ /*align-content: space-around; */ /*align-content: stretch; */ width: 80vw; height: 80vh; margin: 2rem auto; border: 1px solid# 000;} .box1 { display: flex; justify-content: center; align-items: center; /*order: 5; */ flex-shrink: 0; width:30%; height:30%; border: 1px solid#ff0000;
}
.box2 {
width:60%;
height: 60%;
background-color: #ffff00;
}
.box3 {
width: 30%;
height:30%;
background-color: #d58512;
}
.box4 {
width: 20%;
height: 30%;
background-color: #2aabd2;} .box5 { /*align-self: flex-end; */ /*flex-shrink: 0; */ /*flex-grow: 1; */ width: 10%; height: 20%; background-color:#32c086;
}
.box6 {
width: 50%;
height: 40%;
background-color: #5fc0cd;
}
</style>
</head>
<body>
<div class="box1">1
<div class="box2">2</div>
</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
</body>
</html>
Copy the code6. Expand your thinking
Common scenarios for FLEX layouts are vertically centered and in the center, with a three-block layout left, center, and right
7. References
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlflexFlex/layout of the tutorial: Grammar – nguyen other personal blog http://www.ruanyifeng.com/blog/2015/07/flex-examples.html “> flexFlex/layout tutorial: instance – nguyen other personal blog
8. More discussion
Thank you for watching today’s share, that’s all, welcome to like, forward, leave a comment, comment ~