FlexBox elastic layout summary
For HTML layout, CSS style is one of the essential skills of our front-end development; before laying out HTML pages by way of (display + position + float and other CSS property to control) the traditional layout, but due to the low efficiency of the layout of the traditional way, it is proposed W3C the new layout scheme - Flexible layout (layout FlexBox);
On the box model
Understand the box model is an important step to learn the layout. How to calculate the size of the box. There are two versions of computation of a box size:
- W3C standards (major browsers and IE7 + support): the size of the box, including the content (content), Padding (padding), border (border), margins (margin) four parts.
- Quirks mode (IE7 mainly the following versions): including the contents of the box size (content), margins (margin) these two parts.
Since almost IE7 the current version of print, it is calculated to introduce a W3C standard box size. As shown in the following code:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>盒子模型</title>
<style type="text/css">
.box {
width:200px;
padding:20px;
border:2px solid #f00;
margin:10px;
}
</style>
</head>
<body>
<div class="box">
我是个W3C标准盒子(content+padding+border+margin)
</div>
</body>
</html>
Div element is provided padding, border and margin properties above code, then the box size: 200 is + 20 is 2 + 2 2 + 10 2 = 264 (width / i.e. Content + padding 2 + border 2 + margin 2); the W3C standard box model, as shown below:
Box size calculation Summary:
盒子宽width=content+padding-left+padding-right+border-left+border-right+margin-left+margin-right；
盒子高height=content+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom；
Into the topic (FlexBox elastic layout description)
FlexBox are new W3C layout scheme proposed in order to achieve fast layout, also known as elastic layout; just remember the following points can be a good grasp FlexBox elastic layout;
- Flex layout containers and have divided the members of the container. Statement Flex layout element called a container. Flex layout element is wrapped child element called a container member; code as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Flex布局</title>
<style type="text/css">
.parent {
display: flex;
border:1px solid #f00;
padding:10px;
}
.child {
flex:1;
border:1px solid #00f;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是成员一</div>
<div class="child">我是成员二</div>
<div class="child">我是成员三</div>
</div>
</body>
</html>
Due to the above code as parent class by display: flex; declared as flex layout, so it is a container, child container member;
2. There layout flex points of the XY axis, and the shaft directional (X-axis - left to right , to the right; the Y-axis - from top to bottom, from bottom to top). Similar to the X-axis and Y-axis linear coordinate system, the main characteristic to determine the alignment direction of the container member. Wherein the X axis becomes the spindle, Y-axis become cross-axis. As shown below:
As shown above: gray Flex layout containers, left to right in the X-axis represents the red blocks arranged in a layout, blue from top to bottom represents the Y-axis alignment block layout;
- Usually average total width of the container member container, each member needs to set flex: (under the premise of no width) to 1. A member of the container is provided if the width property, then the remaining members of the average (width of the vessel - the width of the member A) of the remaining width;
Flex layout CSS property description
As above say, distinguish the Flex layout container and the container member, the CSS layout properties of the container can distinguish CSS properties and attributes;
- Container set of attributes:
- flex-direction (used to determine the main direction of the container)
- flex-wrap (provided the vessel less than all of the members of the Item element arranged on one axis, can be arranged newline)
- flex-flow (short form of flex-direction property and flex-wrap property, the default value row nowrap)
- justify-content (justify-content attribute defines the alignment members on the I (main) axis direction X)
- align-items (justify-content attribute defines the alignment members on the Y (cross) in the axial direction)
- align-content (defined alignment of a plurality of axes, one axis only if the project, the property does not work)
- Container members of CSS attributes:
- order (the order defined Item, the smaller the value, the more forward arrangement, the default is 0)
- flex-grow (Item defines an enlarged scale, the default is 0, i.e., if there is free space, not amplified)
- flex-shrink (the reduction ratio defined Item default is 1, i.e. if the space is insufficient, that the reduced Item)
- flex-basis (spindle space defined before dispensing extra space, Item occupied (main size))
- flex (flex-grow, flex-shrink and flex-basis shorthand, the default value 0 1 auto; when using only one element flex: 1 will be filled with the whole screen, when there are a plurality of elements using flex: 1 ties being broken screen space size)
- align-self (and the other allows a single Item Item not have the same alignment can align-items of coverage property)
since the layout on Flex CSS properties too, takes up too much space; not introduce too much specific reference Ruan Yifeng tutorial: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Personal experience is the most fle-direction, justify-content, align-items container properties and flex container membership properties in specific items in the scene; in the end on the Web page layout, use display: flex the parent element declaration to flex container to a flex CSS properties take effect. React Native project using the default layout is flex, so no additional declaration, the direct use flex CSS properties to take effect;