弹性容器：在元素上设置了display：flex属性的即为弹性容器，弹性容器上的弹性子元素就会按照弹性布局的方式进行布局
弹性子元素：弹性容器上的直接字元素即为弹性子元素
注意:默认弹性子元素只会排成1行或1列，不会换行。
一、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#parent{
/*设置id为parent的元素为弹性容器。里面的直接子元素的布局方式即为弹性布局*/
display: flex;
width: 900px;
height: 900px;
background: chocolate;
margin: 0 auto;
/*弹性布局主轴：确定子元素的布局是水平排布还是竖直排布*/
/*设置主轴的方向：flex-direction 侧轴为主轴的垂直方向
row（默认值）：子元素从左到右进行排布
row-reverse：子元素从右到左进行排布
column：子元素从上到下进行排布
column：子元素从下到上进行排布
* */
flex-direction:row;
/*设定主轴的排布方式：
justify-content
flex-start（默认）向主轴的开始端靠拢
flex-end：向主轴的末尾靠拢
center：向主轴的中间靠拢
space-between：平均分布，两边没有边距
space-around：平均分布两边有边距，两边的边距是中间的一半
space-evenly:平均分布，两边的边距和中间的一样
* */
justify-content: space-evenly;
/*设定侧轴的排布方式（单行）
align-items：
stretch（默认值）：拉伸。在不设置子元素高度的情况下，默认会拉伸到跟父元素一致的的高度。
flex-start：靠近侧轴的开端
flex-end：靠近侧轴的末端
center：在侧轴居中
* */
align-items: center;
}
.child{
width: 200px;
height: 200px;
background:pink;
}
</style>
</head>
<body>
<div id="parent">
<!--div是块级元素，默认占据一整行-->
<div class="child" style="background: yellow;">1</div>
<div class="child" style="background: violet;">2</div>
<div class="child" style="background: cornflowerblue;">3</div>
</div>
</body>
</html>
二、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width: 600px;
height: 600px;
background:blanchedalmond;
margin: 0 auto;
display: flex;
/*设置弹性可以换行
flex-wrap
nowrap(默认)不换行
wrap换行
* */
flex-wrap: wrap;
/*设置侧轴的多行排布
stretch(默认拉伸)
flex-start:靠近侧轴的开端
flex-end:靠近侧轴的结束端
space-between:平均分布，两边没有间距
space-around：平均分布，两边间距是中间的一半
space-evenly：平均分布，两边的间距和中间一样
* */
align-content: flex-start;
}
.child{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child" style="background: yellow;">1</div>
<div class="child" style="background: violet;">2</div>
<div class="child" style="background: cornflowerblue;">3</div>
<div class="child" style="background: yellow;">1</div>
<div class="child" style="background: violet;">2</div>
<div class="child" style="background: cornflowerblue;">3</div>
</div>
</body>
</html>
剩余空间的分布
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
height: 100%;
}
.page{
width: 100%;
height: 100%;
background: blueviolet;
display: flex;
}
.lanmu{
background: greenyellow;
/*flex可以定义剩余空间的占据情况*/
/*分配剩余空间的2份（比例）*/
flex: 2;
}
.main{
background: teal;
/*分配剩余空间的1份*/
flex: 1;
}
.ad{
width: 200px;
background: darkred;
}
</style>
</head>
<body>
<div class="page">
<div class="lanmu">栏目</div>
<div class="main">主要内容</div>
<div class="ad">广告</div>
</div>
</body>
</html>
弹性子元素的排布
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#parent{
/*设置id为parent的元素为弹性容器。里面的直接子元素的布局方式即为弹性布局*/
display: flex;
width: 900px;
height: 900px;
background: chocolate;
margin: 0 auto;
}
.child{
width: 200px;
height: 200px;
background:pink;
}
.c3{
/*单独对侧轴的子元素进行排布
flex-start
flex-end
stretch
center
* */
align-self: center;
}
</style>
</head>
<body>
<!--order: 在子元素上设置order ，可以按照从小到大的方式进行排序-->
<div id="parent">
<!--div是块级元素，默认占据一整行-->
<div class="child" style="background: yellow; order: 5;">1</div>
<!--一个元素可以有多个类-->
<div class="child c3" style="background: violet; order: 3;">2</div>
<div class="child" style="background: cornflowerblue;order: 1;">3</div>
<div class="child" style="background: violet;order: 2;">4</div>
<div class="child" style="background: cornflowerblue;order: 4;">5</div>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/a155-/p/12243102.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。