正文
css之弹性盒模型
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
弹性盒子（Flexible Box/filebox）是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子由弹性容器（父元素）和弹性子元素（可以一个或者多个）组合而成。弹性容器通过设置display属性的值为flex或者是inline-flex将其定义为弹性容器。
一、display:flex
作用：让当前元素形成盒，控制子元素。
特点：弹性盒里的子元素，都是沿着主轴排列，默认情况下，主轴为X轴。弹性盒里的子元素都能直接添加宽高（不用在乎是块元素还是行内元素）。让弹性盒里的一个子元素左右上下居中，直接给子元素添加margin:auto ;就可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
section{
display: flex;
}
span{
width: 100px;
height: 100px;
background-color: green;
margin: auto;
}
</style>
</head>
<body>
<section>
<span></span> </section> </body>
</html>
二、具有以下属性：
1、flex-direction 改变主轴的排列方向
属性值：
row X为主轴
column Y为主轴
row-reverse 在主轴反向排列
2、justify-content 主轴对齐方式
属性值：
flex-start 默认，顶端对齐
flex-end 末端对齐
center 居中对齐
space-between 两端对齐，中间自动分配
space-around 自动分配距离
3、align-items 侧轴对齐方式
属性值：
flex-start 默认，顶端对齐
flex-end 末端对齐
center 居中对齐
baseline和flex-start等效
4、flex-wrap 换行
属性值：
wrap 换行
nowrap 不换行
wrap-reverse 反向换行
5、allign-content 行与行之间对齐方式
属性值：
flex-start 默认，顶端对齐
flex-end 末端对齐
center 居中对齐
space-between 两端对齐，中间自动分配
space-around 自动分配距离
6、align-self 控制一个子元素（灵活元素）在侧轴的对齐方式
属性值：
auto 默认值。元素继承了它的父容器的align-items属性，如果没有父容器则为“stretch”
stretch 元素被拉伸以适应容器
content 元素位于容器的中心
flex-start 元素位于容器的开头
flex-end 元素位于容器的结尾
7、order 排序（控制子元素的先后顺序，数值越大越向后排。可以为负）
8、flex:1 把剩余空间全部分配给当前元素（当然指的是分配主轴上的空间）
flex是一个复合属性,设置或者是检索弹性盒模型对象的子元素如何分配空间
新版盒模型
flex三个属性介绍：flex-grow:一个数字，规定项目相对于其它灵活的项目进行扩展的量
flex-shrink:一个数字，规定项目将相对于其它灵活项目进行收缩的量
flex-basis:项目长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
box-sizing: border-box;
}
#section1{
width: 600px;
height: 500px;
background-color: aliceblue;
margin: auto;
display: flex;
flex-direction: column;
/* flex-direction: row-reverse; */
flex-direction: row; /*属性1*/
justify-content: center;
justify-content: space-around; /*属性2*/
align-items: baseline;
align-items: flex-start;
align-items: center; /*属性3*/
flex-wrap: wrap; /*属性4*/
align-content: flex-end;
align-content: center; /*属性5*/ }
span{
width: 100px;
height:100px;
background: orange;
border-radius: 50%;
font-size: 20px;
color:white;
text-align: center;
} #section2{
width: 600px;
height: 400px;
background-color: aliceblue;
margin: 0 auto;
display: flex;
align-items: center;
}
div{
width: 100px;
height: 100px;
background-color: antiquewhite;
font-size: 20px;
color:white;
text-align: center;
}
div:nth-child(1){
background-color: red;
order: 3; /* 属性7 */
flex:1; /* 属性8 */
}
div:nth-child(2){
background-color: blue;
/* align-self: flex-end; 属性6 */
flex:1;
border:10px solid green; }
div:nth-child(3){
flex:1;
} </style>
</head>
<body>
<section id="section1">
<span>1</span>
<span>2</span>
<span>3</span>
<span >4</span>
<span>5</span>
<span>6</span>
<span>7</span> </section>
<br>
<section id="section2">
<div>div1</div>
<div>div2</div>
<div>div3</div>
</section>
</body>
</html>
案例1：骰子
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
} html,
body {
height: 100%;
} body {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
} div {
width: 100px;
height: 100px;
background-color: #e7e7e7;
padding: 4;
border-radius: 10px;
box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
} span {
display: block;
width: 24px;
height: 24px;
background-color: black;
border-radius: 12px;
margin: 4px;
box-shadow: inset 0 3px #111, inset 0 -3px #555;
} div:nth-child(1) {
display: flex;
justify-content: center;
align-items: center;
} div:nth-child(2) {
display: flex;
justify-content: space-between;
} div:nth-child(2) span:nth-child(2) {
align-self: flex-end;
} div:nth-child(3) {
display: flex;
flex-direction: column;
} div:nth-child(3) span:nth-child(2) {
align-self: center;
} div:nth-child(3) span:nth-child(3) {
align-self: flex-end;
} div:nth-child(4) {
display: flex;
justify-content: space-between;
} div:nth-child(4) p {
display: flex;
flex-direction: column;
justify-content: space-between;
} div:nth-child(5) {
display: flex;
justify-content: space-between;
} div:nth-child(5) p {
display: flex;
flex-direction: column;
justify-content: space-between;
} div:nth-child(5) p:nth-child(2) {
align-self: center;
}
div:nth-child(6) {
display: flex;
justify-content: space-between;
} div:nth-child(6) p {
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style> </head> <body>
<div>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
</div>
<div>
<p>
<span></span><span></span>
</p>
<p>
<span></span><span></span>
</p>
</div>
<div>
<p>
<span></span><span></span>
</p>
<p>
<span></span>
</p>
<p>
<span></span><span></span>
</p>
</div>
<div>
<p>
<span></span><span></span><span></span>
</p>
<p>
<span></span><span></span><span></span>
</p>
</div>
</body>
</html>
