html/css兼容性查询：
登录caniuse 显示绿色兼容 红色不兼容
设置方式：
给父级添加display:flex 子元素就会自动挤压或者拉伸
组成部分：
弹性容器 =（父盒子）
弹性盒子 （子盒子）
主轴 （X轴）
侧轴/交叉轴 (Y轴)
flex- 主轴的水平对齐方式:
设置方式属性：
justify-content:
演示代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.nima {
display: flex;
/* 弹性盒子居中 */
justify-content: center;
/* 间距在弹性盒子自身的两侧 */
justify-content: space-around;
/* 间距在盒子与盒子的中间 */
justify-content: space-between;
/* 所有间距都一样 */
justify-content: space-evenly;
height: 200px;
border: 1px solid #000;
}
.nima div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="nima">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
flex- 侧轴的水平对齐方式:
设置方式属性：
1， align-items 给弹性容器添加 可以同时控制里面所有的弹性盒子
2，align-self 给单独的弹性盒子添加 单独控制
代码演示：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.nima {
display: flex;
/* 添加到弹性容器控制里面所有的弹性盒子侧轴居中 */
/* align-items: center; */
/* 添加到弹性容器控制里面所有的弹性盒子侧轴拉满容器高度 */
/* 如果弹性盒子没有高度 就会默认侧轴拉满整个弹性容器的高度 */
/* align-items: stretch; */
height: 500px;
border: 1px solid #000;
}
.nima div {
width: 100px;
/* height: 100px; */
background-color: pink;
}
.nima div:nth-child(2) {
/* 单独设置一个盒子侧轴居中 */
align-self: center;
/* 单独设置一个盒子侧轴拉伸至整个容器高度 */
/* align-self: stretch; */
}
</style>
</head>
<body>
<div class="nima">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
弹性伸缩比：
设置属性 ;
felx：1（自定义数值）；
代码演示：
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.nima {
display: flex;
height: 500px;
border: 1px solid #000;
}
.nima div {
margin: 0 20px;
height: 100px;
background-color: pink;
}
.nima div:nth-child(1) {
width: 50px;
height: 150px;
}
/* 用flex取值 目前除去第一个div的宽度 剩下的宽度flex分为5份
第二个div flex: 1; 占一份 第三div flex: 4; 占4份 */
.nima div:nth-child(2) {
flex: 1;
}
.nima div:nth-child(3) {
flex: 4;
}
</style>
</head>
<body>
<div class="nima">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
