https://www.cnblogs.com/chris-oil/p/5736257.html
https://blog.csdn.net/lyznice/article/details/53981062
https://blog.csdn.net/dx18520548758/article/details/54316024
1.png
2.png
demo01的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
section {
width: 80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
/*父级盒子添加flex*/
display: flex;/*伸缩布局模式*/
min-width: 500px;
}
section div {
width: 100%;
}
section div:nth-child(1) {
background-color: pink;
flex: 1; /*子盒子添加份数 flex: 1;不能跟单位*/
}
section div:nth-child(2) {
background-color: purple;
flex: 2; /*子盒子添加份数*/
}
section div:nth-child(3) {
background-color: pink;
flex: 3; /*子盒子添加份数*/
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
效果图：
3.png
demo02伸缩布局固定宽度
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
section {
width: 80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
/*父级盒子添加flex*/
display: flex;/*伸缩布局模式*/
min-width: 500px;
}
section div {
width: 100%;
}
section div:nth-child(1) {
background-color: pink;
width: 300px;
}
section div:nth-child(2) {
background-color: purple;
margin: 0 5px;
flex: 1; /*子盒子添加份数*/
}
section div:nth-child(3) {
background-color: pink;
flex: 2; /*子盒子添加份数*/
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
效果图：
QQ截图20180705144916.png
demo03伸缩布局排列方式
注意：是给父盒子添加flex-direction:column
flex-direction:column
4.png
QQ截图20180705145647.png
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
section {
width: 80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
/*父级盒子添加flex*/
display: flex;/*伸缩布局模式*/
min-width: 500px;
/*给父亲加flex-direction*/
flex-direction: column; /*排列方式 ，可以是水平（row），也可以是垂直*/
}
section div {
width: 100%;
}
section div:nth-child(1) {
background-color: pink;
flex: 1; /*子盒子添加份数*/
}
section div:nth-child(2) {
background-color: purple;
/*margin: 0 5px;*/
flex: 1; /*子盒子添加份数*/
}
section div:nth-child(3) {
background-color: pink;
flex: 2; /*子盒子添加份数*/
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
效果图：
5.png
justify-content属性：调整主轴对齐（水平对齐）
子盒子如何在父盒子里面水平对齐
注意：这些属性是给父亲添加的
6.png
我的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
section {
width: 1000px;
height: 300px;
border: 2px solid pink;
margin: 100px auto;
display: flex;
/*justify-content: flex-start;让子元素从父元素的开头开始排序，但是顺序不变*/
/*justify-content: flex-end;让子元素从父元素的开头开始排序，但是顺序不变*/
/*justify-content: center;让子元素从父元素的中间显示*/
/*justify-content: space-between;左右的盒子贴近父盒子，中间的盒子平均分配*/
/*justify-content: space-around;相当于给盒子左右添加margin值*/
}
div {
width: 250px;
height: 100%;
}
div:first-child {
background-color: pink;
}
div:nth-child(2) {
background-color: purple;
}
div:nth-child(3) {
background-color: skyblue;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
align-items属性:调整侧轴（垂直对齐）
子盒子如何在父盒子里面垂直对齐
注意：这些属性是给父亲添加的
针对于一行的情况使用
7.png
我的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
section {
width: 1000px;
height: 600px;
border: 2px solid pink;
margin: 100px auto;
display: flex;
justify-content: space-around;
/*垂直对齐*/
/*align-items: flex-start;上对齐*/
/*align-items: flex-end;底对齐*/
/*align-items: center;垂直居中对齐*/
/*align-items: stretch;让子元素拉伸父元素的高度，相当于height:100%，前提下子元素没有设置高度*/
}
div {
width: 250px;
/*height: 200px;*/
}
div:first-child {
background-color: pink;
}
div:nth-child(2) {
background-color: purple;
}
div:nth-child(3) {
background-color: skyblue;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
align-content属性：侧轴
8.png
flex-wrap属性:控制是否换行
9.png
10.png
order属性:
11.png
请注意：使用flex布局的容器，子元素的float、clear和vertical-align属性将不起作用。
网友评论