flex布局样式
.div1{
display: flex;
}
.div2{
flex: auto;
text-align: center;
height: 50px;
line-height: 50px;
margin-left: 10px;
background-color: lightblue;
}
.div5{
display: inline-flex;
}
.div6{
width: 200px;
height: 50px;
line-height: 50px;
background-color: red;
text-align: center;
margin-left: 10px;
}
.div7{
display: flex;
flex-direction: column;/*竖着排列*/
text-align: center;
margin-left: 10px;
}
.div9{
display: flex;
flex-direction: column-reverse;/*竖着倒叙*/
text-align: center;
}
.div10{
display: flex;
flex-direction: row;/*竖着倒叙*/
text-align: center;
}
.div11{
display: flex;
flex-direction: row-reverse;
text-align: center;
}
.div8{
text-align: center;
width: 200px;
margin-bottom: 10px;
margin-left: 10px;
line-height: 50px;
background-color: lightcoral;
}
.div12{
display: flex;
flex-flow: wrap-reverse;
}
.div13{
display: flex;
flex-flow: nowrap;
}
.div14{
display: flex;
justify-content: flex-start;
}
.div15{
display: flex;
justify-content: flex-end;
}
.div16{
display: flex;
justify-content: center;
}
.div17{
display: flex;
justify-content: space-between;/*两端对齐*/
}
.div18{
display: flex;
justify-content:space-around/*两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍。*/
}
.div19{
display: flex;
height: 500px;
background-color: lightblue;
align-items:flex-start;/*交叉轴的起点对齐*/
}
.div20{
display: flex;
height: 500px;
background-color: lightblue;
align-items:flex-end;/*交叉轴的终点对齐*/
}
.div21{
display: flex;
height: 500px;
background-color: lightblue;
align-items:center;/*交叉轴的中点对齐*/
}
.div22 {
display: flex;
height: 500px;
background-color: lightblue;
align-items: baseline; /*第一行文字基线对齐*/
}
.div23{
display: flex;
height: 500px;
background-color: lightblue;
align-items:stretch;/*第一行文字基线对齐*/
}
display=flex
前端导航
破解宝典
最新特效
网页布局
参考网址
更多精彩
display=flex
display=inline-flex
inline-flex
inline-flex
inline-flex
inline-flex
inline-flex
column1
column1
column2
column3
column4
column5
column-reverse
column1
column2
column3
column4
column5
row
row1-reverse
row-reverse1
row-reverse2
row-reverse3
row-reverse4
row-reverse5
wrap
wrap1
wrap2
wrap3
wrap4
wrap5
wrap6
wrap7
wrap8
wrap9
wrap10
wrap11
wrap12
wrap13
wrap14
nowrap
wrap1
wrap2
wrap3
wrap4
wrap5
wrap6
wrap7
wrap1
wrap2
wrap3
wrap4
wrap5
wrap6
wrap7
justify-content: flex-start
flex-start1
flex-start2
flex-start3
flex-start4
flex-start5
justify-content: flex-end
flex-end1
flex-end2
flex-end3
flex-end4
flex-end5
justify-content: center
center1
center2
center3
center4
center5
justify-content: space-between
space-between1
space-between2
space-between3
space-between4
space-between5
justify-content: space-around
space-around1
space-around2
space-around3
space-around4
space-around5
flex-start
flex-start1
flex-start2
flex-start3
flex-start4
flex-start5
flex-end
flex-end1
flex-end2
flex-end3
flex-end4
flex-end5
center
center1
center2
center3
center4
center5
baseline
baseline1
baseline2
baseline3
baseline4
baseline5
stretch
stretch1
stretch2
stretch3
stretch4
stretch5