伸缩盒模型第三章(伸缩)
介绍了伸缩性的伸缩提现到哪些方面，以及flex 居中的小技巧，视觉差异等
- flex 水平垂直居中
- 伸缩性
- flex 复合式属性
- 项目排序
- 侧轴单独对齐
flex 水平居中
我们可以使用flex 使元素居中对齐，当然也可以用 margin 等进行对比，但是比较麻烦
代码
<title>08.水平垂直居中对齐</title>
<style>
.outer {
width: 600px;
height: 600px;
background-color: #888;
/* 开启弹性盒子 */
display: flex;
/* 方案一 主轴 侧轴对齐 */
/* justify-content: center;
align-items: center; */
}
.inner {
width: 150px;
height: 150px;
background-color: pink;
/* 方案二 */
margin: auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
效果
方案1
前提一定是需要开启弹性布局，display: flex;
/* 方案一 主轴 侧轴对齐 */
justify-content: center;
align-items: center;
方案2
/* 方案二 */
margin: auto;
flex-basic 基线
- 概念： flex-basis 设置的是主轴方向的基准长度，会让宽度或高度失效。
- flex-basis 默认值为 auto
代码
<title>09.基线对齐</title>
<style>
.outer {
width: 800px;
height: 800px;
background-color: #888;
display: flex;
/* 主轴方向 如果是横向，那么flex-basis代表的就是宽度，高度就失效了 */
/* flex-direction: row; */
/* 主轴方向 如果是纵向，那么flex-basis代表的就是高度，宽度就失效了 */
flex-direction: column;
}
.inner {
width: 200px;
height: 200px;
background-color: deeppink;
border: 1px solid black;
}
.inner2 {
/* 默认值是 auto */
/* flex-basis: auto; */
flex-basis: 300px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner inner2">2</div>
<div class="inner">3</div>
</div>
</body>
主轴方向
我们设置主轴方向的不同，会让宽或者高失效
主轴横向
flex-direction: row
.inner2 {
/* 默认值是 auto */
/* flex-basis: auto; */
flex-basis: 300px;
}
结论
主轴方向 如果是横向，那么flex-basis代表的就是宽度，高度就失效了,我们设置的每一个项目宽度是200px，但是当我们设置了 flex-basis 为300px的时候，伸缩项目原来的200px宽度就失效了，统一为300px
主轴为纵向
我们可以设置主轴为纵向，也就是上下
flex-direction: column;
.inner2 {
/* 默认值是 auto */
/* flex-basis: auto; */
flex-basis: 300px;
}
总结
主轴方向 如果是纵向，那么flex-basis代表的就是高度，宽度就失效了。每个项目本身是200px，当设置了 flex-basis 后，高度就变为 300px了
伸缩项目(伸)
flex-grow（伸）
- 概念： flex-grow 定义伸缩项目的放大比例，默认为 0 ，即：纵使主轴存在剩余空间，也不拉伸（放大）。
- 规则
- 若所有伸缩项目的 flex-grow 值都为 1 ，则：它们将等分剩余空间（如果有空间的话）。
- 若三个伸缩项目的 flex-grow 值分别为： 1 、 2 、 3 ，则：分别瓜分到： 1/6 、 2/6 、
3/6 的空间。
代码
<title>10.伸缩项目(伸)</title>
<style>
.outer {
width: 1000px;
height: 700px;
background-color: #888;
margin: 0 auto;
/* 开启弹性布局 */
display: flex;
/* 主轴方西 默认从左到右边 */
flex-direction: row;
/* 换行 */
flex-wrap: wrap;
}
.inner {
width: 200px;
height: 200px;
background-color: aqua;
border: 1px solid black;
box-sizing: border-box;
font-size: 30px;
text-align: center;
/* 开始拉伸 */
/* flex-grow: 1; */
/* 方式1 1 就是每一个 项目均分剩余的空间 */
/* flex-grow: 1; */
}
/* 方式二 分开设置 我们留下了300px的空间 那么就是所有的 flex-grow来平均分配这些剩下的空间
比例值 300 / 6 = 50
inner1 = 50 * 1 = 50px + 200px = 250px
inner2 = 50 * 2 = 100px + 300px = 400px
inner3 = 50 * 3 = 150px + 200px = 250px
*/
.inner1 {
flex-grow: 1;
}
.inner2 {
width: 300px;
background-color: deeppink;
flex-grow: 2;
}
.inner3 {
flex-grow: 3;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
</div>
</body>
案例一
我们将伸缩项目均分
.inner {
width: 200px;
height: 200px;
background-color: aqua;
border: 1px solid black;
box-sizing: border-box;
font-size: 30px;
text-align: center;
/* 开始拉伸 */
/* flex-grow: 1; */
/* 方式1 1 就是每一个 项目均分剩余的空间 */
flex-grow: 1;
}
效果
公式计算
我们设置了父容器盒子为1000px，三个盒子占用的空间为 200 + 300 + 200 = 700 ,也就是说我们还剩余了200px的宽度，这个时候我们设置了 flex-grow为1 就是是均分了剩下的 300 那么就是每个伸缩项目各占100
- 总等分为 1 + 1 + 1 = 3
- 300（剩余的空间） / 3 = 100
- 项目1 = 100 * 1 + 200（自身宽度） = 300px
案例二
我们将每个项目均不同划分，这个时候每个项目分摊后得到的均不相同,分开设置 我们留下了300px的空间 那么就是所有的 flex-grow来平均分配这些剩下的空间
.inner1 {
flex-grow: 1;
}
.inner2 {
width: 300px;
background-color: deeppink;
flex-grow: 2;
}
.inner3 {
flex-grow: 3;
}
效果
公式计算
比例值 300 / 6 = 50
inner1 = 50 * 1 = 50px + 200px = 250px
inner2 = 50 * 2 = 100px + 300px = 400px
inner3 = 50 * 3 = 150px + 200px = 350px
伸缩项目(缩)
flex-shrink（缩）
概念： flex-shrink 定义了项目的压缩比例，默认为 1 ，即：如果空间不足，该项目将会缩小。
注意
我们需要将 flex-wrap设置为压缩模式，否则不生效 flex-wrap: nowrap;
背景
我们设置了三个项目，分别为 item1 = 200px item2 = 300px item3 = 200px ，共起来是 700px
容器大小为 400px
压缩空间为 700 - 400 = 300px
我们需要在压缩的300 身上分析每一个均摊了多少
代码
<title>11.伸缩项目(缩)</title>
<style>
.outer {
width: 400px;
height: 700px;
background-color: #888;
margin: 0 auto;
/* 开启弹性布局 */
display: flex;
/* 主轴方西 默认从左到右边 */
flex-direction: row;
/* 默认就是压缩空间 改选项一定要开启 */
flex-wrap: nowrap;
}
.inner {
width: 200px;
height: 200px;
background-color: aqua;
border: 1px solid black;
box-sizing: border-box;
font-size: 30px;
text-align: center;
/* 均分拉伸剩余空间 */
flex-grow: 1;
/* 缩小 方式1 均分 */
/* flex-shrink: 1; */
/* 计算缩小方式 压缩300的空间
共计三个伸缩项目
所有的都加起来计算分母
200 * 1 + 300 * 1 + 200 * 1 = 700
inner1 比例 (200 * 1) / 700 = 0.2857
inner2 比例 300 * 1 / 700 = 0.4285
inner3 比例 200 * 1 / 700 = 0.2857
inner1 需要缩小的范围 300 * 0.2857 = 85.714
inner2 需要缩小的范围 300 * 0.4285 = 128.57
inner3 需要缩小的范围 300 * 0.2857 = 85.714
inner1 实际大小为 200 - 85.714 = 114.2857
inner2 实际大小为 300 - 128.57 = 171.4285
inner3 实际大小为 200 - 85.714 = 114.2857
*/
}
/* 方式2 每一个都不同 */
/*
总空间为： (200 * 1) + (300 * 2) + (200 * 3) = 1400
*/
.inner1 {
/*
所占比例为: 200 * 1 / 1400 = 0.14285
需要压缩的空间为：0.14285 * 300 = 42.857
剩余的空间为： 200 - 42.857 = 157.14285
*/
flex-shrink: 1;
}
.inner2 {
width: 300px;
background-color: tomato;
/*
所占比例为: 300 * 2 / 1400 = 0.42857
需要压缩的空间为：0.42857 * 300 = 128.5714
剩余的空间为： 300 - 128.5714 = 171.4285
*/
flex-shrink: 2;
}
.inner3 {
/*
所占比例为: 200 * 3 / 1400 = 0.42857
需要压缩的空间为：0.42857 * 300 = 128.5714
剩余的空间为： 200 - 128.5714 = 71.428
*/
flex-shrink: 3;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
</div>
</body>
比例均分
我们缩小比例都设置为1 ，这个时候，我们看到1 和3 一样，摊的比我们想象中的要少，按照我们的想象，是不是 1 需要压缩100 ，2也是100 3 也是100 呢，实际不是。具体算法看下方公式
flex-shrink: 1
效果
计算公式
计算缩小方式 压缩300的空间
共计三个伸缩项目
所有的都加起来计算分母
200 * 1 + 300 * 1 + 200 * 1 = 700
inner1 比例 (200 * 1) / 700 = 0.2857
inner2 比例 300 * 1 / 700 = 0.4285
inner3 比例 200 * 1 / 700 = 0.2857
inner1 需要缩小的范围 300 * 0.2857 = 85.714
inner2 需要缩小的范围 300 * 0.4285 = 128.57
inner3 需要缩小的范围 300 * 0.2857 = 85.714
inner1 实际大小为 200 - 85.714 = 114.2857
inner2 实际大小为 300 - 128.57 = 171.4285
inner3 实际大小为 200 - 85.714 = 114.2857
比例不均分
我们将每一个项目压缩比例设置不同，压缩的空间还是300 ，看这些是如何分配的
.inner1 {
flex-shrink: 1;
}
.inner2 {
width: 300px;
background-color: tomato;
flex-shrink: 2;
}
.inner3 {
flex-shrink: 3;
}
效果
公式计算
总空间为： (200 * 1) + (300 * 2) + (200 * 3) = 1400
# 项目1计算 flex-shrink: 1;
/*
所占比例为: 200 * 1 / 1400 = 0.14285
需要压缩的空间为：0.14285 * 300 = 42.857
剩余的空间为： 200 - 42.857 = 157.14285
*/
# 项目2 计算 flex-shrink: 2;
/*
所占比例为: 300 * 2 / 1400 = 0.42857
需要压缩的空间为：0.42857 * 300 = 128.5714
剩余的空间为： 300 - 128.5714 = 171.4285
*/
# 项目3 计算 flex-shrink: 3;
/*
所占比例为: 200 * 3 / 1400 = 0.42857
需要压缩的空间为：0.42857 * 300 = 128.5714
剩余的空间为： 200 - 128.5714 = 71.428
*/
flex 复合属性
flex 是复合属性，复合了： flex-grow 、 flex-shrink 、 flex-basis 三个属性，默认值为 0 1
auto 。
- 注意
- 我们一定要注意顺序，第一个代表为 flex-grow(拉)，flex-shirk(缩)，flex-basis 基线
代码
<title>12.复合属性flex</title>
<style>
.outer {
width: 900px;
height: 700px;
background-color: #888;
margin: 0 auto;
/* 开启弹性布局 */
display: flex;
/* 主轴方西 默认从左到右边 */
flex-direction: row;
/* 默认就是压缩空间 */
flex-wrap: nowrap;
}
.inner {
width: 200px;
height: 200px;
background-color: chocolate;
border: 1px solid black;
box-sizing: border-box;
font-size: 30px;
text-align: center;
/* 均分拉伸剩余空间 */
/* flex-grow: 1; */
/* 均摊压缩空间 */
/* flex-shrink: 1; */
/* 基线 */
/* flex-basis: 100px; */
/* 有顺序要求 拉 缩 基线 */
/* 写法1 拉伸 缩小 自动 简写 flex: auto */
/* flex: 1 1 auto; */
/* 写法2 全部都是拉伸的效果 简写 flex: 1 */
/* flex: 1 1 0; */
/* 写法3 不拉 不缩 高度自动 缩小的里面内容就溢出了 ，大了也不填充
简写 flex : none
*/
/* flex: 0 0 auto; */
/* 写法4 不拉 可以缩 宽高自动 简写 flex: 0 auto 实际就是默认值 */
flex: 0 1 auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</body>
写法1
- flex: 1 1 auto; 拉伸 缩小 自动
- 简写为 flex: auto
写法2
- flex: 1 1 0; 全部都是拉伸的效果
- 简写 flex: 1
写法3
- flex: 0 0 auto; 不拉 不缩 高度自动 缩小的里面内容就溢出了 ，大了也不填充
- 简写 flex : none
写法4
- flex: 0 1 auto; 不拉 可以缩 宽高自动 ，实际为默认值
- flex: 0 1 auto;
项目排序与单独对齐
我们可以设置项目的排列顺序已经对齐方式；
代码
<title>13.项目排序与单独对齐</title>
<style>
.outer {
width: 900px;
height: 700px;
background-color: #888;
margin: 0 auto;
/* 开启弹性布局 */
display: flex;
/* 主轴方西 默认从左到右边 */
flex-direction: row;
/* 默认就是压缩空间 */
flex-wrap: nowrap;
}
.inner {
width: 200px;
height: 200px;
background-color: purple;
border: 1px solid black;
box-sizing: border-box;
font-size: 30px;
text-align: center;
}
.inner2 {
background-color: aliceblue;
order: -3;
}
.inner4 {
/* 排序，默认是0 也就是以写的标签一个一个的排列 */
order: -1;
/* 对齐 实际上是 侧轴 */
align-self: flex-end;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
<div class="inner inner4">4</div>
</div>
</body>
项目排序
- order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0 。
.inner4 {
/* 排序，默认是0 也就是以写的标签一个一个的排列 */
order: -1;
}
.inner2 {
background-color: aliceblue;
order: -3;
}
单独对齐
- 通过 align-self 属性，可以单独调整某个伸缩项目的对齐方式
- 默认值为 auto ，表示继承父元素的 align-items 属性。
.inner4 {
/* 排序，默认是0 也就是以写的标签一个一个的排列 */
order: -1;
/* 对齐 实际上是 侧轴 */
align-self: flex-end;
}
