指的是使用样式来让普通盒子变成弹性盒子。并不是新增了某些弹性标签。
之前布局：盒模型+浮动+定位。在做复杂布局的时候，写起来比较麻烦。
可以把弹性布局理解成是高级版（升级版）的浮动+盒模型布局。
颠覆了我们之前对布局的理解和使用。
一、怪异盒模型
区别：不是新增了盒模型属性，盒模型的总宽总高的计算方式发生了改变
面试：标准盒模型和怪异盒模型的区别？
/*要给元素启用怪异盒模型，需要写对应的样式*/
标签{
box-sizing:content-box(默认值)|border-box（怪异盒模型）;
}- 标准盒模型（标准盒模型）
总宽、总高需要3个属性参与
总宽=width+左右padding+左右border
总高=height+上下padding+上下border
// 盒子的总宽希望是400- 怪异盒模型（非标准盒模型）
总宽只需要一个属性参与，即width=总宽。
总宽=width宽，不管有没有添加padding或border，如果添加了则会自动扣除
//希望总宽是400
/*标准盒模型*/
div{
width:354px;
padding:20px;
border:2px solid red;
}
/*怪异盒模型*/
div{
box-sizing:border-box;
width:400px;
padding:20px;
border:2px solid red;
}好处：
- 不需要计算复杂在盒模型
- 移动端首选的盒模型
/*实际开发中*/
在reset.css中全局启用该怪异盒模型
*{
box-sizing:border-box;
margin:0;
padding:0
}
//推荐
div,p,h1,h2,h3,ul,li,dd,dt,dl{
box-sizing:border-box;
margin:0;
padding:0
}二、弹性布局【重难点】
指的就是用弹性盒子来布局。
指的是使用样式来让普通盒子变成弹性盒子。并不是新增了某些弹性标签。
之前布局：盒模型+浮动+定位。在做复杂布局的时候，写起来比较麻烦。
可以把弹性布局理解成是高级版（升级版）的浮动+盒模型布局。
颠覆了我们之前对布局的理解和使用。
弹性盒子涉及的属性比较多，比较复杂，容易记混。
弹性布局分两部分：
- 弹性容器（父级）
- 弹性盒子（元素本身）
一、给父级添加的属性6个
-
display:felx;设置父级为弹性布局
/*添加到父级上*/ .father{ display: flex; } /*目的让里面的子元素变成弹性盒子，影响的是里面的直接子元素，不影响孙元素*/ -
flex-direction弹性盒子的水平或垂直对齐方式的属性
也就是规定弹性盒子在主轴上的对齐方式（左对齐、右对齐，从上到下对齐，从下到上）
flex-direction:row|row-reverse|column|column-reverse 属性值说明： row:默认值-从左到右 row-reverse：在主轴上，从右到左排列 column：让弹性盒子对的排列 -
justify-content 把弹性项(子元素)沿着弹性容器的主轴线（main axis）对齐。
也就是水平方向分布弹性盒子。
作用：解决主轴方向的富裕空间管理（留白）
语法： justify-content:flex-start|flex-end|center|space-between|space-around; 一共5种分配富裕空间的方式。 1. justify-content:flex-start（默认值） 弹性项目向行头紧挨着填充. 人话：子元素在主轴开始位置，富裕空间在主轴结束位置。 即弹性盒子在左侧，留白在右侧 2. justify-content:flex-end; 弹性项目向行尾紧挨着填充 人话：与flex-start相反，子元素在主轴结束位置，而富裕空间在子元素开始位置。 即弹性盒子在右侧，留白在左侧 3. justify-content:center; 弹性项目居中紧挨着填充。 人话：子元素在主轴中间位置，富裕空间在主轴两侧 即弹性盒子在中间，留白平均分配在两侧 4. justify-content:space-between; 弹性项目平均分布在该行上。 人话：富裕空间平均分配在每两个子元素之间。（第一个和最后一个没有空间） 5. justify-content:space-around; 弹性项目平均分布在该行上，两边留有一半的间隔空间。 人话：富裕空间平均分配在每个元素的两侧。（手拉手） -
align-items
可以理解为单行子元素在父容器中的垂直方向的对齐方式
作用：纵轴方向的富裕空间管理（留白）
align-items:stretch(默认值)|flex-start|flex-end|center|baseline; 解释： stretch：元素被拉伸至纵轴起始结束位置，如果该元素不写高度则无富裕空间 flex-start: 元素在纵轴起始位置，富裕空间在纵轴结束位置 flex-end: 元素在纵轴结束位置，富裕空间在纵轴开始位置 center: 元素在纵轴中间位置，富裕空间在纵轴两侧（上下）位置 baseline: 元素根据纵轴文字上的基线对齐。 -
让弹性盒子换行（默认所有的弹性盒子都在同一行）
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 取值： nowrap(默认值) wrap (换行，第一行在上方) wrap-reverse; (换行，第一行在下方) 注意：如果在子元素中使用了flex-grow:1;则可能不会生效。 -
多行的弹性盒子的对齐方式
取值同align-items 相当于是多行子元素的侧轴对齐方式。如果项目（子元素）只有一根轴线，该属性不起作用。 注意：针对的是多行，影响的是整体，而不会影响单行在侧轴上的对齐方式。
二、添加在弹性盒子的5个属性
-
flex-grow 较多
属性用于指定弹性子元素如何按比例分配父级的富余空间。可一般简写为flex来指代flex-grow 默认值为0，即不平分父级空间,即使有剩余空间，弹性盒子的宽度是自适应的。 添加到子元素身上（弹性盒子身上）相当于是宽度属性。 注意：使用后，该子元素的宽度值将失效 注意：flex-grow是按照比例分得父级的富裕空间。 小技巧：假设不想让子元素的width属性影响你的计算，则可以将其的值设置为0；注意：flex-grow是按照比例分得父级的富裕空间。
1、子元素都没有给宽度，如果值为1，每个子元素的宽度都一致
2、为了避免子元素的内容超过子元素的宽度，最好先给子元素的宽度设为0；
3、如果子元素给了宽度，那么就有个计算公式
剩余空间/比例的和*每个子元素的比例+子元素的width宽度=该子元素的最终宽度；
剩余空间=父元素的宽度-子元素的宽度和；
比如：父级总共400px,有3个子元素，每个子元素的flex-grow都为1，其中1、3子元素给了默认宽度width为100，那么：
还有：400-200=200剩余
所以每份为：200/3=66.6
所以，1、3子元素的实际宽度为100+66.6=166，2为66 -
flex-shrink 较少
跟flex-grow相反的意思。指的是按照比例来收缩空间。 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 子元素的总宽超过了父元素的宽度，就会按照1:1的方式自动收缩空间，直到能够容纳下来。 如果设置为0，则该子元素不收缩空间，哪怕是父级空间不足，如果是1，则会按照比例收缩空间。不能为负数。 -
flex-basis
可简单理解为宽度。 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。 注意：当该子元素既有width又有flex-basis时，basis权重要比width高。比如设置basis为300，而width为200，则呈现出来的是300px其中1、2、3可以合并为一个属性：flex.
flex:1;//等价于 flex-grow:1; felx:1 0 120px;// flex-grow flex-shrink flex-basis; -
order
取值： 阿拉伯数字：用整数值来定义排列顺序，数值小的排在前面。可以为负值。默认为0.(按照书写的结构顺序来排) 比如： order:1;//排在后面一点 order:-1;//排在前面一点 -
align-self
子元素单独在侧轴（纵轴）方向上的对齐方式。 注意:该属性值会覆盖父级上的align-content。 取值：auto（默认值）|stretch|center|flex-start|flex-end|baseline| 给具体的某一个子元素添加，作用在该子元素身上。如果是align-items则修饰的是所有的子元素。
技巧：
- 弹性布局不是要把所有的属性都写上，大概写3-5个就能满足大部分的弹性布局需求
- 一个好用的可视化的弹性布局的工具推荐给大家：https://www.imqd.cn/tools/flexbox/
相关单词
- grow 成长，长大
- shrink 收缩
- basis 基础，基本
- order 命令，排序
- self 自己，
此资源下载链接已被无情的隐藏，请输入验证码解锁：
请关注本站公众号回复“验证码”，获取验证码。
在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号
