FLEX布局
1.在外层容器设置display:flex; 内部的节点称为项目。
2.flex有两条轴,水平的主轴,和垂直的交叉轴
3.容器的6个属性:flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content
flex-direction
表示主轴的方向:row(水平向右(默认))/row-reverse(水平向左)/column(竖直向下)/column-reverse(竖直向上);
flex-wrap
表示轴线排满的换行方式:wrap(自动换行)/nowrap(禁止换行(默认))/wrap-reverse(向上换行)
flex-flow前两个的合集:比如row wrap;
justify-content
水平方向的排列方式:flex-start(左对齐(默认))/flex-end(右对齐)/center(居中)/space-between(两端对齐)/space-around(等间隔排列,两端项目距离边界为项目间距离的一半);
align-items
垂直方向的对齐方式:flex-start(向上对齐)/flex-end(乡向下对齐)/center(垂直居中)/stretch(没有设置高度的情况下,垂直方向上拉伸铺满(默认))/baseline(以项目的第一行文字的基线对齐)
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用:flex-start/flex-end/center/stretch/space-between/space-around
4.项目的属性:order/flex-grow/flex-shrink/flex-basic/flex/align-self
order:属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
flex-grow:属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-shrink:属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-basis。。。。。。。。。。。。。, :属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
flex:属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。auto | flex-start | flex-end | center | baseline | stretch;
5.使用flex实现元素的水平垂直居中
在默认也就是flex-direction: row;下比较正常,justify-content就是水平居中,而align-items就是垂直居中,但是
在flex-direction 为column下实现水平垂直居中情况就反过来了,设置align-items:center;结果是水平居中,而设置justify-content:center;则为垂直居中
<!DOCTYPE html>
<html>
<head>
<title>flex布局练习</title>
<style type="text/css">
html,body{
background: #8E8E8E;
}
.wraper{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.container{
display: flex;
width: 200px;
height: 200px;
padding: 20px;
margin-bottom: 80px;
box-sizing: border-box;
border-radius: 5px;
background: #E4E4E4;
box-shadow: 1px 1px 2px 2px #BFBFBF;
}
.container > .container{
margin-left: 80px;
}
.dot{
width: 40px;
height: 40px;
background: #242424;
border-radius: 20px;
}
/*一点*/
.box1{
justify-content: center;
}
.item11{
align-self: center;
}
/*二点*/
/*.box2{
align-content: space-between;
flex-wrap: wrap;
}
.test{
display: flex;
flex-basis: 100%;
}*/
.box2{
justify-content: space-between;
}
.item22{
align-self: flex-end;
}
/*三点*/
.box3{
justify-content: space-between;
}
.item32{
align-self: center;
}
.item33{
align-self: flex-end;
}
/*四点*/
.box4{
align-content: space-between;
flex-wrap: wrap;
}
.box4 .group{
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
/*五点*/
.box5{
align-content: space-between;
flex-wrap: wrap;
}
.box5 .group{
display: flex;
flex-basis: 100%;
justify-content: space-between;
}
.box5 .group:nth-child(2){
justify-content: center;
}
/*六点*/
.box6{
justify-content: space-between;
}
.box6 .group{
display: flex;
flex-wrap: wrap;
flex-basis: 40px;
}
.box6 .group .dot:nth-child(2){
align-self: center;
}
.box6 .group .dot:nth-child(3){
align-self: flex-end;
}
</style>
</head>
<body>
<div class="wraper">
<div class="box1 container">
<span class="item11 dot"></span>
</div>
<div class="box2 container">
<span class="dot"></span>
<span class="dot item22"></span>
</div>
<div class="box3 container">
<span class="dot"></span>
<span class="dot item32"></span>
<span class="dot item33"></span>
</div>
<div class="box4 container">
<div class="group">
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="group">
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div class="box5 container">
<div class="group">
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="group">
<span class="item53 dot"></span>
</div>
<div class="group">
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div class="box6 container">
<div class="group">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="group">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</div>
</body>
</html>