问：为什么要使用flex布局?
答：因为好用
在面试的时候，当面试官问我们为什么要使用flex布局的时候，首先我们得先明白一点，问这个问题面试官到底想要了解什么？简单的回答”好用“肯定是不行的，任何方案和技术的出现都是为了弥补之前的缺陷，所以相比传统的布局方案存在的痛点，flex布局肯定有存在的优势和价值。所以接下来我们得说传统的布局是怎样的形式，然后使用了flex布局又是什么样的形式。
布局的传统解决方案，基于盒子模型，依赖 display，position，float 等属性。它对于那些特殊布局非常不方便。
简介：
- flex布局（Flexible布局，弹性布局）是在小程序开发经常使用的布局方式
- 开启了flex布局的元素叫做
flex container
flex container里面的直接子元素叫做flex items（也就是开启了flex布局的盒子包裹的第一层子元素）- 设置display的属性为flex或者
inline-flex可以开启flex布局即成为flex container
主轴对齐方式
目标：使用justify-content调节元素在主轴的对齐方式
- 修改主轴对齐方式属性:
justify-content
使用flex 实现均匀排列 justify-content: center
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 1000px;
height: 600px;
background: orange;
justify-content: center;
}
.box div {
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
效果
(其他属性一样使用)
侧轴对齐方式
目标：使用align-items调节元素在侧轴的对齐方式
l 修改侧轴对齐方式属性:
-
align-items（添加到弹性容器） -
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
伸缩比
目标：使用flex属性修改弹性盒子伸缩比
-
属性
-
- flex : 值;
-
-
取值分类
-
- 数值(整数)
-
注意 : 只占用父盒子剩余尺寸
