弹性盒子详解
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了弹性盒子详解相关的知识，希望对你有一定的参考价值。
5、flex-wrap
说明：
该属性控制flex容器是单行或者多行，同时横轴的方向决定了新堆叠的方向。
Nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
Wrap: flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
Wrap-reverse：反转wrap排列
wrap：
Wrap-reverse：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section{
width: 500px;
height: 375px;
background: #eee;
display: flex;
margin: auto;
flex-direction: row;
flex-wrap: wrap-reverse;
}
span{
width: 100px;
height: 100px;
background: olive;
border-radius: 50%;
text-align: center;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</section>
</body>
</html>
6、align-content（行与行之间对齐方式）
说明
当伸缩容器的侧轴还有多余空间时，本属性可以用来调准【伸缩行】在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的<justify-content>属性类似。请注意本属性在只有一行的伸缩容器上没有效果。
- flex-start没有行间距
- flex-end底对齐没有行间距
- center居中没有行间距
- space-between俩段对齐，中间自动分配
- space-around自动分配距离
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section{
width: 500px;
height: 375px;
background: #eee;
display: flex;
margin: auto;
flex-direction: row;
flex-wrap: wrap;
align-content: space-around;
}
span{
width: 100px;
height: 100px;
background: olive;
border-radius: 50%;
text-align: center;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
</section>
</body>
</html>
7、align-self
说明：
Align-self属性规定灵活容器内被选中项目的对齐方式。
注意：align-self属性可重写灵活容器的align-items属性。
- auto 默认值。元素继承了它的父容器的align-items属性。如果没有父容器则为“strech”。
- Stretch 元素被拉伸以适应容器
- Center 元素位于容器的中心
- Flex-start元素位于容器的开头
- Flex-end 元素位于容器的结尾
注意：intenet Explorer和Safari浏览器不支持align-self属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section{
width: 500px;
height: 375px;
background: #eee;
display: flex;
margin: auto;
flex-direction: row;
flex-wrap: wrap;
align-content: space-around;
}
span{
width: 100px;
height: 100px;
text-align: center;
font-size: 13px;
font-weight: 900;
color: #fff;
}
span:nth-child(1){
background: orange;
}
span:nth-child(2){
background: red;
}
span:nth-child(3){
background: green;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
</body>
</html>
去掉span的height属性：文字撑开的大小
去掉align-content之后：高度变成100%
注意，弹性盒子元素不写heght属性，默认高度是100%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section{
width: 500px;
height: 375px;
background: #eee;
display: flex;
margin: auto;
flex-direction: row;
flex-wrap: wrap;
}
span{
width: 100px;
text-align: center;
font-size: 13px;
font-weight: 900;
color: #fff;
}
span:nth-child(1){
background: orange;
}
span:nth-child(2){
background: red;
}
span:nth-child(3){
background: green;
align-self: flex-end;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
</body>
</html>
8、order
说明：排序（控制子元素的先后顺序）数值越大越往后排列，支持负数，默认是0
9、flex
说明：
符合属性。设置火箭所弹性盒模型对象的子元素如何分配空间。
缩写【flex:1】则其计算值为【110%】
缩写【flex:auto】，择期计算值为【11auto】
Flex：none，则其计算值为00auto
Flex：0 auto或者flex：index，则其计算值为01 auto，即flex初始值
设置flex:1，平均分配空间，
给谁设置flex，谁分型剩余空间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section{
width: 500px;
height: 375px;
background: #eee;
display: flex;
margin: auto;
flex-direction: row;
flex-wrap: wrap;
}
span{
width: 100px;
height: 100px;
text-align: center;
font-size: 13px;
font-weight: 900;
color: #fff;
flex: 1;
}
span:nth-child(1){
background: orange;
}
span:nth-child(2){
background: red;
}
span:nth-child(3){
background: green;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
</body>
</html>
以上是关于弹性盒子详解的主要内容，如果未能解决你的问题，请参考以下文章