CSS3 FLEX 弹性盒模型让布局飞起来 -cyy
作者：互联网
弹性布局初体验：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
*{
margin:0;
padding:0;
}
main{
width:100%;
height:100vh;
display:flex;
}
nav{
width:80px;
background:pink;
}
article{
background:lightblue;
flex:1;
}
</style>
</head>
<body>
<main>
<nav></nav>
<article></article>
</main>
</body>
</html>
使用弹性盒模型布局底部菜单栏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
*{
margin:0;
padding:0;
}
body{
display:flex;
height:100vh;
flex-direction:column;
}
main{
background:pink;
flex:1;
}
footer{
height:60px;
background:#ddd;
display:flex;
justify-content: space-evenly;
}
footer div{
flex:1;
text-align:center;
line-height:60px;
color:#555;
}
footer div:nth-of-type(n+2){
border-left:1px solid #ccc;
}
</style>
</head>
<body>
<main></main>
<footer>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
</footer>
</body>
</html>
改变弹性元素方向：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
*{
margin:0;
padding:0;
}
article{
border:1px solid pink;
width:100%;
display:flex;
flex-direction:row;
flex-direction:row-reverse;
flex-direction:column;
flex-direction:column-reverse;
}
/* article下的所有子元素 */
article *{
width:100px;
height:100px;
background:lightblue;
margin:5px;
}
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
</body>
</html>
控制弹性元素溢出换行处理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
*{
margin:0;
padding:0;
}
article{
border:1px solid pink;
width:100%;
display:flex;
flex-direction:row;
flex-wrap:wrap;
flex-wrap:wrap-reverse;
}
/* article下的所有子元素 */
article *{
width:140px;
height:140px;
background:lightblue;
margin:5px;
}
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
</body>
</html>
统一设置元素的排列方式与换行：
flex-direction + flex-wrap = flex-flow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
*{
margin:0;
padding:0;
}
article{
border:1px solid pink;
width:100%;
display:flex;
flex-flow:row wrap;
}
/* article下的所有子元素 */
article *{
width:140px;
height:140px;
background:lightblue;
margin:5px;
}
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
</body>
</html>
主轴元素的多种排列方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
*{
margin:0;
padding:0;
}
article{
border:1px solid pink;
width:100%;
display:flex;
/* 主轴开始 */
justify-content:flex-start;
/* 主轴结束 */
justify-content:flex-end;
/* 整体居中 */
justify-content:center;
/* 左右两边距离相等 */
justify-content:space-around;
/* 左右靠边，中间平分 */
justify-content:space-between;
/* 完全平分 */
justify-content: space-evenly;
}
/* article下的所有子元素 */
article *{
width:80px;
height:80px;
background:lightblue;
}
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
</body>
</html>
交叉轴元素的多种排列方式：
【单行情况下】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
*{
margin:0;
padding:0;
}
article{
border:1px solid pink;
width:100%;
height:100vh;
display:flex;
/* 交叉轴开始 */
align-items:flex-start;
/* 交叉轴结束 */
align-items:flex-end;
/* 交叉轴居中 */
align-items:center;
/* 交叉轴拉伸，当direcrion为row时，需要元素不设置高度；当direction为column时，需要元素不设置宽度 */
align-items:stretch;
}
/* article下的所有子元素 */
article *{
width:80px;
/* height:80px; */
background:lightblue;
}
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
</body>
</html>
水平垂直居中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
*{
margin:0;
padding:0;
}
article{
border:1px solid pink;
width:100%;
height:100vh;
display:flex;
justify-content: center;
align-items:center;
}
/* article下的所有子元素 */
article *{
width:80px;
height:80px;
background:lightblue;
}
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
</body>
</html>
多行元素在交叉轴的排列方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
*{
margin:0;
padding:0;
}
article{
border:1px solid pink;
width:100%;
height:100vh;
display:flex;
flex-wrap:wrap;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
align-content: space-evenly;
}
/* article下的所有子元素 */
article *{
width:120px;
height:120px;
background:lightblue;
}
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</article>
</body>
</html>
弹性元素交叉轴控制：
【针对单一元素】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
*{
margin:0;
padding:0;
}
article{
border:1px solid pink;
width:100%;
height:100vh;
display:flex;
}
/* article下的所有子元素 */
article *{
width:120px;
height:120px;
background:lightblue;
}
article :first-child{
align-self:stretch;
height:auto;
}
article :nth-child(2){
align-self:center;
}
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
</body>
</html>
元素可用空间分配：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
*{
margin:0;
padding:0;
}
article{
border:1px solid pink;
width:100%;
height:100vh;
display:flex;
}
/* article下的所有子元素 */
article *{
width:80px;
height:80px;
background:lightblue;
padding:10px;
background-clip:content-box;
border:1px solid lightblue;
}
article :first-child{
/* 不平分，默认的宽度 */
flex-grow:0;
}
article :nth-child(2){
flex-grow:2;
}
article :nth-child(3){
flex-grow:3;
}
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
</body>
</html>
标签：CSS3,FLEX,flex,cyy,height,content,width,background,article 来源： https://www.cnblogs.com/chenyingying0/p/13945942.html