弹性布局:display:flex; block;inline-block;inline;none;
弹性容器:在元素上设置了display:flex;的属性即为弹性容器。弹性容器里面的子元素就会按照弹性布局的方式进行布局。
弹性子元素:弹性容器里面的直接子元素即为弹性子元素。
<style type="text/css">
#parent{
/*设置id为parent的元素为弹性容器。里面 直接子元素的布局方式即为弹性布局*/
display: flex;
width: 600px;
height: 600px;
background: skyblue;
margin: 0 auto;
}
.child{
width: 200px;
height: 200px;
background: pink;
/*display: inline-block;
float: left;*/
}
</style>
<div id="parent">
<div class="child">
<span>123</span>
</div>
<div class="child"></div>
<div class="child"></div>
</div>
注意:弹性子元素为3个child的div元素,span不属于直接子元素,那么不是弹性布局。
弹性布局主轴:确定子元素的排布是水平排布还是竖直排布。侧轴为主轴的垂直方向。
设置主轴的方向:flex-direction,
row(默认值):子元素是从左到右进行排布。
Row-reverse: 子元素是从右到左排布
Column:子元素从上到下排布
Column-reverse:子元素从下到上排布。
注意:默认弹性子元素只会排成1行或者是1列。不会换行。
/*设定主轴的排布方式
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;
弹性布局多行排布
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width: 600px;
height: 600px;
background: #ccc;
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:space-evenly ;
}
.child{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child" style="background: orange;">1</div>
<div class="child" style="background: lawngreen;">2</div>
<div class="child" style="background: cyan;">3</div>
<div class="child" style="background: orange;">1</div>
<div class="child" style="background: lawngreen;">2</div>
<div class="child" style="background: cyan;">3</div>
</div>
</body>
</html>
剩余空间占据flex
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
height: 100%;
}
.page{
width: 100%;
height: 100%;
background: #ccc;
display: flex;
}
.lanmu{
/*flex:可以定义剩余空间的占据情况*/
background: greenyellow;
flex: 1;
}
.main{
background: purple;
flex: 2;
}
.ad{
/*width: 200px;*/
flex: 1;
background: yellow;
}
</style>
</head>
<body>
<div class="page">
<div class="lanmu">栏目1</div>
<div class="main">主要内容2</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: 600px;
background: skyblue;
margin: 0 auto;
}
.child{
width: 200px;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<!--
order:
在子元素上设置order,可以按照从小到大的方式进行排序。
-->
<div id="parent">
<div class="child" style="background: orange;order: 5;">1</div>
<div class="child" style="background: lawngreen;order: 3;">2</div>
<div class="child" style="background: cyan; order: 4;">3</div>
<div class="child" style="background: lawngreen;order: 1;">4</div>
<div class="child" style="background: cyan;order: 2;">5</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: 600px;
background: skyblue;
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 class="child" style="background: orange;">1</div>
<div class="child" style="background: lawngreen;">2</div>
<div class="child c3" style="background: cyan;">3</div>
<div class="child" style="background: lawngreen;">4</div>
<div class="child" style="background: cyan;">5</div>
</div>
</body>
</html>
HTML定位
相对定位position: relative;相对定位相对于自己当前位置的一个移动。原来空间的位置依然会被占据,只是样子移动。
必须配合:left,right,top,bottom四个属性使元素移动。。
绝对定位position: absolute;相对于设定了定位的父元素或者是祖先元素进行定位。脱离正常的文档流,不占据之前的空间。
必须配合:left,right,top,bottom四个属性使元素移动。。
固定定位position: fixed;相对于浏览器进行定位。脱离正常的文档流,不占据空间。
Z-index:设定在同一位置上定位元素,谁的位置更在前面。数值越大,层越高,越在前面显示。