css之flex例項學習
阿新 • • 發佈：2019-02-06
1、 一個圓點
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .outer{ display:flex; width: 300px; height: 300px; border:1px solid black; } .inner{ width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: burlywood; border-radius: 50px; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> </div> </body> </html>
2、兩個圓點
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .outer{ display:flex; /*flex-wrap: wrap;*/ justify-content: space-between; width: 300px; height: 300px; border:1px solid black; } .inner{ width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: burlywood; border-radius: 50px; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> </div> </body> </html>
<style type="text/css"> .outer{ display:flex; /*flex-wrap: wrap;*/ justify-content: space-between; flex-direction: column; width: 300px; height: 300px; border:1px solid black; } .inner{ width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: burlywood; border-radius: 50px; } </style>
<style type="text/css">
.outer{
display:flex;
/*flex-wrap: wrap;*/
/*justify-content: space-between;*/
/*flex-direction: column;*/
width: 300px;
height: 300px;
border:1px solid black;
}
.inner{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: burlywood;
border-radius: 50px;
}
.inner:nth-child(2){
align-self:center;
}
</style>
<style type="text/css">
.outer{
display:flex;
/*flex-wrap: wrap;*/
justify-content: space-between;
/*flex-direction: column;*/
width: 300px;
height: 300px;
border:1px solid black;
}
.inner{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: burlywood;
border-radius: 50px;
}
.inner:nth-child(2){
align-self:flex-end;
}
</style>
<style type="text/css">
.outer{
display:flex;
/*flex-wrap: wrap;*/
/*justify-content: space-between;*/
/*flex-direction: column;*/
width: 300px;
height: 300px;
border:1px solid black;
}
.inner{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: burlywood;
border-radius: 50px;
}
.inner:nth-child(2){
align-self:flex-end;
}
</style>
3、flex屬性使用
<style type="text/css">
.outer{
display:flex;
width: 300px;
height: 300px;
border:1px solid black;
}
.inner{
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: burlywood;
border-radius: 25px;
}
.inner:nth-child(1){
flex:2;
order:4;
}
.inner:nth-child(2){
flex:1;
order: 10;
}
.inner:nth-child(3){
flex:1;
order: 8;
}
</style>
