相信大家在学习网页的时候都会感觉听着简单，但是做的时候总时做不好，盒子布局的宽和高，总时让你头大，下面我们就进入弹性盒子布局（Flex布局），编程网页更加容易吧1
什么是Flex布局（弹性盒子布局）？
Flex为Flexible Box的缩写，意思是“弹性盒子”，用来为盒子模型提供最大的灵活性。小编通俗易懂的话就是设置好宽（或者高），让其他标签的宽高把盒子的高（或者宽）撑起来。我们把felx容器简称为“容器”，子元素自动称为容器成员称为“flex项目”，简称为“项目”。
容器默认存在二个轴：水平方向为主轴，垂直方向为交叉轴
如何改为弹性盒子？
块元素成为弹性盒子
.Box{
//块元素改为fllex
display: flex;
}行内元素改为弹性盒子布局（用的不多）
.Box{
display: inline-flex;
}
在Webkit内核浏览器是，必须要加上前缀
.Box{
display: -webkit-flex;
display: flex;
}
注意事项：Flex布局后，子元素的float,clear和vertical-align不能生效：
特点：没有其他属性情况下
1，所一子元素都以一列方式排列倒父元素中。
2，如果子元素的总宽度超过父元素，子元素就等比例缩小。
3，如果子元素的总宽度不超过父元素，子元素就就正常排列。
容器样式属性
flex-direction：决定主轴的排列方向
| row | 主轴为水平方向，从左开始排列 |
| row-reverse | 主轴为水平方向，从右开始排列 |
| column | 主轴为垂直方向，从上开始排列 |
| column-reverse | 主轴为垂直方向，从下开始排列 |
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<title>弹性盒子布局</title>
<link rel="stylesheet" href="../css/general.css">
<link rel="stylesheet" href="../css/flex.css">
</head>
<body>
<div class="Box">
<div>这是个div1</div>
<div>这是个div2</div>
<div>这是个div3</div>
<div>这是个div4</div>
<div>这是个div5</div>
<div>这是个div6</div>
</div>
</body>
</html>
//css部分
.Box{
width: 500px;
height: 200px;
border: 1px solid red;
/* 让Box成为弹性盒子布局 */
display: flex;
margin: auto;
font-size: 20px;
/* 决定主轴的排列方向
row 主轴为水平方向，从左开始排列
row-reverse 主轴为水平方向，从右开始排列
column 主轴为垂直方向，从上开始排列
column-reverse 主轴为垂直方向，从下开始排列
*/
flex-direction:row-reverse;
}
.Box>div{
width: 50px;
height: 200px;
color: pink;
border: 1px solid black;
}
flex-wrap 换不换行
| wrap | 换行 |
| Nowrap（默认） | 不换行 |
| wrap-reverse | 换行，在第一行下方 |
flex-flow属性
flex-flow属性是flex-wrap与flex-direction属性的简写。默认row Nowrap.
justify-content: 项目在主轴上的对齐方式
| flex-start | 左对齐 |
| flex-end | 右对齐 |
| space-between | 二端对齐，项目之间隔相等 |
| space-around | 每个项目二测之间隔相等，项目直接间隔比项目边框间隔大 |
.Box{
width: 500px;
height: 200px;
border: 1px solid red;
/* 让Box成为弹性盒子布局 */
display: flex;
margin: auto;
font-size: 20px;
/* justify-content 项目在主轴上的对齐方式
flex-start 左对齐
flex-end ：右对齐
space-between 二端对齐，项目之间隔相等
space-around 每个项目二测之间隔相等，项目直接间隔比项目边框间隔大
*/
justify-content: space-around;
}
.Box>div{
width: 50px;
height: 200px;
color: pink;
border: 1px solid black;
}
align-items 项目在交叉轴上的对齐方式
| stretch | （默认）如果项目没有设置高度或者为auto，将占满整个容器， |
| flex-start | 交叉轴起点对齐 |
| flex-end | 交叉轴终点对齐 |
| baseline | 目的第一行文字的基线对齐 |
| center | 交叉轴中心点对齐 |
.Box{
width: 500px;
height: 200px;
border: 1px solid red;
/* 让Box成为弹性盒子布局 */
display: flex;
margin: auto;
font-size: 20px;
/* align-items 项目在交叉轴上的对齐方式
stretch 如果项目没有设置高度或者为auto，将占满整个容器，
flex-start 交叉轴起点对齐
flex-end ：交叉轴终点对齐
baseline 项目的第一行文字的基线对齐
center 交叉轴中心点对齐
*/
align-items: baseline;
}
.Box>div{
width: 50px;
height: 200px;
color: pink;
border: 1px solid black;
}
align-content 定义多根轴线的对齐方式，如果项目只有一根轴线，改属性不起作用
| center | 与交叉轴的中心对齐 |
| flex-start | 与交叉轴起点对齐 |
| flex-end | 与交叉轴终点对齐 |
| stretch | 轴线占满整个交叉线 |
| space-between | 与交叉轴二端对齐，项目之间隔相等 |
| space-around | 每个轴线二测之间隔相等，项目直接间隔比项目边框间隔大 |
.Box{
width: 600px;
height: 1000px;
border: 1px solid red;
/* 让Box成为弹性盒子布局 */
display: flex;
margin: auto;
font-size: 20px;
justify-content: space-around;
flex-wrap: wrap-reverse;
/* align-content 定义多根轴线的对齐方式，如果项目只有一根轴线，改属性不起作用。
*/
align-content: space-around;
}
.Box>div{
width: 150px;
height: 200px;
color: pink;
border: 1px solid black;
}
项目样式属性
order 定义排列顺序
.Box{
width: 600px;
height: 1000px;
border: 1px solid red;
/* 让Box成为弹性盒子布局 */
display: flex;
margin: auto;
font-size: 20px;
}
.Box>div{
width: 150px;
height: 200px;
color: pink;
border: 1px solid black;
}
.Box > div:nth-child(4){
/*
order 定义排列顺序，数值小，排前面，默认为0；
*/
order: -2;
}
flex-grow 规定项目放大比例
.Box{
width: 600px;
height: 1000px;
border: 1px solid red;
/* 让Box成为弹性盒子布局 */
display: flex;
margin: auto;
font-size: 20px;
flex-wrap: wrap;
}
.Box>div{
width: 150px;
height: 200px;
color: pink;
border: 1px solid black;
flex-grow
}
.Box > div:nth-child(4){
/*
order 定义排列顺序，数值小，排前面，默认为0；
*/
flex-grow:2;
}
flex-shrink 规定项目缩小比例
默认为1，如果空间不足时缩小，当空间小，flex-shrink设置为0时，项目就不会缩小，空间足够时，不变，负值无效。
flex-basis 定义分配多余空间之前，计算主轴是否有多余空间
默认是auto，项目本来大小。
flex flex-grow与flex-shrink简写
align-self 允许单个项目与其他项目不一样的对齐方式
可覆盖 align-items属性，默认为auto，表示继承父类的align-items属性，如果没有父类，则等同于stretch.
.Box{
width: 600px;
height: 1000px;
border: 1px solid red;
/* 让Box成为弹性盒子布局 */
display: flex;
margin: auto;
font-size: 20px;
flex-wrap: wrap;
}
.Box>div{
width: 150px;
height: 200px;
color: pink;
border: 1px solid black;
}
.Box > div:nth-child(8){
/*
order 定义排列顺序，数值小，排前面，默认为0；
*/
flex-shrink:4;
align-self:flex-end ;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
