Flex 弹性布局
概念
- Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
-
FlexBox布局更多的用到移动端，PC端除了盒子模型布局，也支持FlexBox布局 , FlexBox布局将会是成为未来开发的主流技术，将在移动端体现的最明显。 - 对浏览器的
兼容性
.box{
display: flex;
}
//行内元素布局
.box{
display: inline-flex;
}
// Webkit内核浏览器
ox{
display: -webkit-flex; /* Safari */
display: flex;
}
- 采用 Flex 布局的元素，称为
Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex 项目（flex item），简称"项目"
- 容器默认存在两根轴：
水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
注意:主轴和交叉轴，其实是可以相互转化的，下面介绍的
flex-direction属性，就可以改变主轴和交叉轴
所以felx的布局要从2个方面着手，"容器" 和 "项目"`
容器的属性有6个
flex-direction决定item在主轴的排列方向（水平方向/垂直方向）.
flex-wrap决定item在主轴的方向上是否换行.
flex-flow是flex-direction和flex-wrap的综合属性
justify-content定义 item的在主轴对齐方式
align-items定义item在交叉轴的对象方式
align-content定义了 多行item 在多根轴线的对齐方式 是一个整体的属性值
flex的属性 这是在容器盒子上
-
flex-direction属性 决定主轴的方向 (水平方向的例子)
flex-direction: row | row-reverse | column| column-reverse;
-
flex-direction属性 决定主轴的方向 (垂直方向的例子)
-
flex-wrap属性 是否换行
flex-wrap: nowrap | wrap | wrap-reverse;
-
justify-content属性 是在主轴的上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items 属性 实在交叉轴上(侧轴)的对齐方式
{ align-items: flex-start 交叉轴起点 | flex-end 交叉轴终点 | center 居中| baseline 基线| stretch 如果项目未设置高度或设为auto，将占满整个容器的高度; 如果项目设置高度，stretch就会失效 }
align-content属性 定义多行排列的(和flex-wrap属性搭配使用) 对齐方式 把其看成一个整体
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
项目属性6个
order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow:定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis:定义了在分配多余空间之前，项目占据的主轴空间（main size）
flex:属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
伸缩项/项目属性: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
用于控制当所有伸缩项的宽度总和小于伸缩容器宽度的时候如何扩充自己, 以便于所有伸缩项宽度的总和能够填满整个伸缩容器。
默认情况下flex-grow的取值是0, 表示我们设置的宽度是多少就按照多少来显示, 不进行任何的扩充
注意点:
只有当所有伸缩项的宽度总和小于伸缩容器宽度的时候flex-grow这个属性才有效
flex-grow缩小的公式
1.利用伸缩容器宽度 - 所有伸缩项的宽度 = 剩余空间
600 - 300 = 300
2.利用剩余空间 / 所有需要扩充份数的总和 = 每一份的大小
300 / (1 + 4 + 8) = 23.07
3.利用当前伸缩项的宽度 + 需要的份数的宽度
第一个伸缩项 = 100 + (1 * 23.07) = 123.07
第二个伸缩项 = 100 + (4 * 23.07) = 192.28
第三个伸缩项 = 100 + (8 * 23.07) = 284.56
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: 600px;
height: 600px;
border: 1px solid #000;
margin: 100px auto;
display: flex;
flex-direction: column;
}
ul>li{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
background: red;
}
ul>li:nth-child(1){
/*
在伸缩项中有一个flex-grow属性, 用于控制当所有伸缩项的宽度总和小于伸缩容器宽度的时候如何扩充自己, 以便于所有伸缩项宽度的总和能够填满整个伸缩容器
默认情况下flex-grow的取值是0, 表示我们设置的宽度是多少就按照多少来显示, 不进行任何的扩充
注意点:
只有当所有伸缩项的宽度总和小于伸缩容器宽度的时候flex-grow这个属性才有效
flex-grow缩小的公式
1.利用伸缩容器宽度 - 所有伸缩项的宽度 = 剩余空间
600 - 300 = 300
2.利用剩余空间 / 所有需要扩充份数的总和 = 每一份的大小
300 / (1 + 4 + 8) = 23.07
3.利用当前伸缩项的宽度 + 需要的份数的宽度
第一个伸缩项 = 100 + (1 * 23.07) = 123.07
第二个伸缩项 = 100 + (4 * 23.07) = 192.28
第三个伸缩项 = 100 + (8 * 23.07) = 284.56
*/
flex-grow: 1;
}
ul>li:nth-child(2){
background: green;
flex-grow: 4;
}
ul>li:nth-child(3){
background: blue;
flex-grow: 8;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
注意:如果 容器里面的元素 设置的
flex-grow总和小于 1，那么就是剩余空间*flex-grow的值
比如: 剩余空间是300设置的flex-grow的值为 0.2那么300 * 0.2就是要扩充的值
flex-shrink: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
用于控制当所有伸缩项的宽度总和大于伸缩容器宽度的时候如何缩小自己, 以便于所有伸缩项宽度的总和能够填满整个伸缩容器
默认情况下flex-shrink的取值是1, 表示当所有伸缩项宽度的总和大于伸缩容器宽度的时候等比缩小自己
注意点:
只有当所有伸缩项的宽度总和大于伸缩容器宽度的时候flex-shrink这个属性才有效
flex-shrink扩充的公式
1.利用所有伸缩项的宽度总和 - 伸缩容器宽度 = 溢出的宽度
900 - 600 = 300
2.计算权重值
利用每一个伸缩项需要的份数 * 当前伸缩项的宽度 然后再相加
1 * 300 + 4 * 300 + 8 * 300 = 3900
3.计算每个伸缩项需要缩小的范围
溢出的宽度 * 当前伸缩项的宽度 * 当前伸缩项需要的份数 / 权重值
300 * 300 * 1 / 3900 = 23.07
第一个伸缩项宽度 = 300 - 23.07 = 276.9
300 * 300 * 4 / 3900 = 92.3
第二个伸缩项宽度 = 300 - 92.3 = 207.6
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: 600px;
height: 600px;
border: 1px solid #000;
margin: 100px auto;
display: flex;
}
ul>li{
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
background: red;
}
ul>li:nth-child(1){
/*
在伸缩项中有一个flex-shrink属性, 用于控制当所有伸缩项的宽度总和大于伸缩容器宽度的时候如何缩小自己, 以便于所有伸缩项宽度的总和能够填满整个伸缩容器
默认情况下flex-shrink的取值是1, 表示当所有伸缩项宽度的总和大于伸缩容器宽度的时候等比缩小自己
注意点:
只有当所有伸缩项的宽度总和大于伸缩容器宽度的时候flex-shrink这个属性才有效
flex-shrink扩充的公式
1.利用所有伸缩项的宽度总和 - 伸缩容器宽度 = 溢出的宽度
900 - 600 = 300
2.计算权重值
利用每一个伸缩项需要的份数 * 当前伸缩项的宽度 然后再相加
1 * 300 + 4 * 300 + 8 * 300 = 3900
3.计算每个伸缩项需要缩小的范围
溢出的宽度 * 当前伸缩项的宽度 * 当前伸缩项需要的份数 / 权重值
300 * 300 * 1 / 3900 = 23.07
第一个伸缩项宽度 = 300 - 23.07 = 276.9
300 * 300 * 4 / 3900 = 92.3
第二个伸缩项宽度 = 300 - 92.3 = 207.6
*/
flex-shrink: 1;
}
ul>li:nth-child(2){
background: green;
flex-shrink: 4;
}
ul>li:nth-child(3){
background: blue;
flex-shrink: 8;
}
</style>
