4. The flexible pouch model
4.1 What is a flexible pouch model
css3 introduces a new layout mode, called Flexbox layout, and layout that is scalable (Flexible Box) model, also known in many parts of the flexible pouch model, we call the following flexible pouch model, it can be used to provide a more effective the development, adjustment and distribution of a container project layout
The css layout summary:
块布局
行内布局
表格布局
定位布局
FlexBox布局（css3新引入）4.2. The term master Flexbox model
1. The main shaft and side shaft
And the spindle-side shaft you can simply understood as two axes on the horizontal and vertical directions, similar to the x-axis and y-axis, the spindle is by default in the horizontal direction, but may be provided, arranged in the vertical direction of the spindle, the outer spindle the other side shaft axis is
2. The container and retractable telescopic project
Telescopic container is the display attribute is set to flex or inline-flex containers (boxes), stretching the telescopic container is this project following subelements
4.3. The new version and the old version
Flexbox layout syntax specification is divided into three types:
旧版本：2009年版本，使用display:box或者display:inline-box
混合版本： 2011年版本，使用display:flexbox 或者display:inlne-flexbox
最新版本： 使用display:flex 或者 display:inlne-flexView Flexbox compatibility support case
https://caniuse.com/#search=flexbox
4.4.flex first experience
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta ="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.box {
height: 100px;
background-color: green;
display: flex;
}
.box div {
height: 80px;
width: 80px;
margin: auto;
background-color: orangered;
}
</style>
</head>
<body>
<div class="box">
<div class="box-item_1">1</div>
<div class="box-item_2">2</div>
<div class="box-item_3">3</div>
<div class="box-item_4">4</div>
</div>
</body>
</html>4.5. The new version of the flexible pouch model
Container-related property
1. Set the spindle
display: flex;
/* 设置主轴为水平 */
/* flex-direction: row; */
/* 设置主轴方向为垂直 */
flex-direction: column;2. Set Item sort direction
/*
使用flex-direction来设置主轴和项目的排序方向
flex-direction：有四个值，分别是row（水平正方向）、row-revers（水平反方向）、column（垂直正方向）、column-revers（垂直反方向）
*/
flex-direction: column-reverse;Summary: Telescopic items are always arranged in the positive direction of the spindle
3. Alignment
Let me talk about spatial concepts wealthy, affluent space is literally extra space, that is, after sub-elements arranged in the remaining space, whether or spindle shaft has a rich side space concept
new version
/*
主轴 justify-content： 5个选项值
flex-start： 项目位于容器的开头，富裕空间在后
flex-end： 富项目位于容器的结尾， 富裕空间在前
center： 项目位于容器的中心，富裕空间在两边
space-between： 富裕空间在项目之间
space-around： 项目位于各行之前、之间、之后都留有空白的容器内。富裕空间在项目前后都有
*/
display: flex;
justify-content: flex-end;/*
侧轴 align-items： 5个选项值
flex-start: 元素位于容器的开头（起点对齐（
flex-end: 元素位于容器的结尾（终点对齐）
center:元素位于容器的中心。（居中对齐）
baseline: 元素位于容器的基线上（基线对齐）
stretch: 默认值。元素被拉伸以适应容器
*/
display: flex;
justify-content: flex-end;
align-items: baseline;4. Telescopic linefeed
/*
no-wrap: 单行显示
wrap： 多行显示
wrap-reverse：多行显示，排列顺序和wrap相反
*/
flex-wrap: wrap;5. Adjust the flow direction flex-flow line feed
6. Stack telescopic line
Related property on the telescopic project
1. stretchable flex
2. The display order order
4.6. Elastic older box model
Container-related property
1. Set the spindle
display: -webkit-box;
/* 设置主轴为水平 */
/* -webkit-box-orient: horizontal; */
/* 设置主轴为垂直 */
-webkit-box-orient: vertical;2. Set Item sort direction
/*默认正方向： normal， 反方向为reverse*/
-webkit-box-direction: reverse;3. Alignment
/*
主轴：
-webkit-box-pack
start：起点对齐
end： 终点对齐
center：居中对齐
justify： 两边对齐
*//*
侧轴：
-webkit-box-align
start：起点对齐
end： 终点对齐
center：居中对齐
justify： 两边对齐
*/Screw classroom video lessons Address: http://edu.nodeing.com