flex-box
2018-11-12 本文已影响0人
亨锅锅
flex布局常用属性总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 900px;
height: 700px;
border: 1px solid #000;
list-style: none;
margin: 100px auto;
display: flex;
/*flex-direction: row;*/
/*flex-direction: row-reverse;*/
/*flex-direction: column;*/
/*flex-direction: column-reverse;*/
/*justify-content: flex-start;*/
/*justify-content: flex-end;*/
/*justify-content: center;*/
/*justify-content: space-between;*/
/*justify-content: space-around;*/
/*justify-content: space-evenly;*/
/*align-items: flex-start;*/
/*align-items: flex-end;*/
/*align-items: center;*/
/*align-items: baseline;*/
/*align-items: stretch;*/
/*flex-wrap: nowrap;*/
/*flex-wrap: wrap;*/
/*flex-wrap: wrap-reverse;*/
/*align-content: flex-start;*/
/*align-content: flex-end;*/
/*align-content: center;*/
/*align-content: space-between;*/
/*align-content: space-around;*/
/*align-content: space-evenly;*/
/*align-content: stretch;*/
/*flex:flex-grow flex-shrink flex-basis;*/
}
ul>Li{
flex-basis: 300px;
width: 200px;
height: 200px;
background: deepskyblue;
line-height: 200px;
text-align: center;
float: left;
border: 1px solid #ff0000;
box-sizing: border-box;
/*flex-grow: 1;*/
}
li:nth-child(1){
/*padding-top: 20px;*/
/*align-self: flex-end;*/
/*order: -1;*/
/*flex-shrink: 3;*/
}
li:nth-child(2){
/*order: -2;*/
/*flex-grow: 2;*/
/*flex-shrink: 2;*/
}
li:nth-child(3){
/*flex-shrink: 1;*/
}
</style>
</head>
<body>
<ul>
<Li>x</Li>
<Li>y</Li>
<Li>z</Li>
</ul>
</body>
</html>
补充（2019-02-12），最近在学习小程序的过程中发现腾讯官方的flex布局文档，十分牛波，附上链接：
https://developers.weixin.qq.com/ebook?action=get_post_info&docid=00080e799303986b0086e605f5680a
