浅谈Flex布局与缩放⽐例计算
⼀、Flex 布局简介
Flex 是 Flexible Box 的缩写，意为"弹性布局"，⽤来为盒状模型提供最⼤的灵活性。
任何⼀个容器都可以指定为 Flex 布局，也就是说，⾏内元素也可以设置成Flex 布局。
1
2
3
4
// 将块级元素div设置为flex布局
div {
display: flex;
}
1
2
3
4
// 将⾏内元素span设置为flex布局
span {
flex布局对齐方式display: flex;
}
采⽤ Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有⼦元素⾃动成为容器成员，称为 Flex 项⽬（flex item），简称"项⽬"。
⼆、Flex布局的默认特性
默认情况下，容器中的所有⼦元素都将进⾏⽔平排列，类似于强制进⾏了⼀个左浮动，所以容器⼦元素的float和clear属性会失效。同时，容器中的⼦元素的对齐⽅式将不受vertical-align控制，即vertical-align也会失效。
5
6
7
8
9
10
11
12
13
14
15
<style>
#main{
width:800px;
height:300px;
display:flex;
font-size: 20px;
background: red;
}
</style>
<div id="main">
<div class="item-1">红⾊</div>
<div class="item-2">蓝⾊</div>
<div class="item-3">带有更多内容的绿⾊啊</div>
</div>
① 在没有给容器设置垂直⽅向对齐⽅式同时容器⼦元素也没有设置⾼度，那么容器⼦元素的⾼度是和容器的⾼度是⼀样的，如上，容器中所有的⼦元素的⾼度都会变为300px。
② 默认情况下，容器下的⼦元素的宽度是不会⾃动放⼤的，即默认以元素⾃⾝的实际宽度显⽰。如图所⽰:
③ 默认情况下，容器下的⼦元素的宽度是可以缩⼩的，当容器中所有⼦元素的宽度之和超过了容器的宽度，默认不会换⾏显⽰，那么就需要缩⼩容器⼦元素的宽度以保证容器能够容纳下所有的⼦元素。但容器⼦元素的宽度并不是⽆限缩⼩的，即缩⼩到不能缩⼩为⽌。
5
6
7
8
9
.item-1 {
width: 200px;
}
.item-2 {
width: 8800px;
}
.item-3 {
width: 8800px;
}
⽐如上⾯，item2、item3宽度设置成了8800px，容器中所有⼦元素的宽度和为17800px，远远超出了容器的宽度800px，所以容器中的所有⼦元素必须按⽐例压缩，item1元素的宽度应变为200 - 191.01 = 8.99px，⽽item1最⼩被压缩为存放⼀个字所需要的宽度，即刚好等于字体的⼤⼩，即20px，所以item1的宽度将变为20px。
④ 默认情况下，容器中的⼦元素可以被压缩到最⼩为⽌，但是当压缩到最⼩后仍然放不下所有的⼦元素，那么⼦元素就会被放到容器的外⾯。
⑤ 如果给容器添加⼀个垂直⽅向的对齐⽅式，那么容器中所有⼦元素的⾼度将变为实际的⾼度，不会与容器等⾼。
1
2
3
4
5
6
7
8
#main{
width:800px;
height:300px;
display:flex;
font-size: 20px;
background: red;
align-items: flex-start;/*添加垂直⽅向对齐⽅式*/
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。