display:flex是盒子模型,有兼容模式,要IE8以上的浏览器,
以下属性都要在 display : flex 的前提下才有效 .box
flex :1 || 2 || 3
计算一共有几个 flex 然后拿总长度除于份额,再按每份计算
.box{
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display:flex;
}
.flex{
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-box-flex:1;
box-flex:1;
flex:1;
}
flex-wrap
类似浮动向左一样,一直排列下去
flex-direction
flex-direction: row || row-reverse || column || column-reverse 把子元素 上下左右排列
.flex-direction-row{flex-direction: row}
.flex-direction-row-reverse{flex-direction: row-reverse}
.flex-direction-column{flex-direction: column}
.flex-direction-column-reverse{flex-direction: column-reverse}
justify-content
justify-content : flex-start || flex-end || center || space-between || space-around
.justify-content-start{-webkit-justify-content: flex-start; justify-content: flex-start;}
.justify-content-end{-webkit-justify-content: flex-end; justify-content: flex-end;}
.justify-content-center{-webkit-justify-content:center; justify-content:center}
.justify-content-space-between{-webkit-justify-content: space-between; justify-content: space-between;}
.justify-content-space-around{-webkit-justify-content: space-around; justify-content: space-around;}
align-items
.align-items-start{-webkit-align-items:flex-start;align-items:flex-start;}
.align-items-end{-webkit-align-items:flex-end;align-items:flex-end;}
.align-items-center{-webkit-align-items:center ;align-items:center ;}
.align-items-baseline{-webkit-align-items:baseline;align-items:baseline;}
.align-items-stretch{-webkit-align-items:stretch;align-items:stretch;}
align-content
.align-content-start{-webkit-align-content: flex-start;align-content: flex-start;}
.align-content-end{-webkit-align-content: flex-end;align-content: flex-end;}
.align-content-center{-webkit-align-content: center;align-content: center;}
.align-content-space-between{-webkit-align-content: space-between;align-content: space-between;}
.align-content-space-around{-webkit-align-content: space-around;align-content: space-around;}
.align-content-stretch{-webkit-align-content: stretch;align-content: stretch;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.box{
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display:flex;
}
.flex{
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-box-flex:1;
box-flex:1;
flex:1;
}
.flex-wrap{flex-wrap:wrap;}
.flex-direction-row{flex-direction: row}
.flex-direction-row-reverse{flex-direction: row-reverse}
.flex-direction-column{flex-direction: column}
.flex-direction-column-reverse{flex-direction: column-reverse}
.justify-content-start{-webkit-justify-content: flex-start; justify-content: flex-start;}
.justify-content-end{-webkit-justify-content: flex-end; justify-content: flex-end;}
.justify-content-center{-webkit-justify-content:center; justify-content:center}
.justify-content-space-between{-webkit-justify-content: space-between; justify-content: space-between;}
.justify-content-space-around{-webkit-justify-content: space-around; justify-content: space-around;}
.align-items-start{-webkit-align-items:flex-start;align-items:flex-start;}
.align-items-end{-webkit-align-items:flex-end;align-items:flex-end;}
.align-items-center{-webkit-align-items:center ;align-items:center ;}
.align-items-baseline{-webkit-align-items:baseline;align-items:baseline;}
.align-items-stretch{-webkit-align-items:stretch;align-items:stretch;}
.align-content-start{-webkit-align-content: flex-start;align-content: flex-start;}
.align-content-end{-webkit-align-content: flex-end;align-content: flex-end;}
.align-content-center{-webkit-align-content: center;align-content: center;}
.align-content-space-between{-webkit-align-content: space-between;align-content: space-between;}
.align-content-space-around{-webkit-align-content: space-around;align-content: space-around;}
.align-content-stretch{-webkit-align-content: stretch;align-content: stretch;}
.flex{
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-box-flex:1;
box-flex:1;
flex:1;
}
.w-300{width: 300px;}
.w-100{width: 100px;}
.w-50{width: 50px;}
.h20{height: 20px;}
.h30{height: 30px;}
.h40{height: 40px;}
.h50{height: 50px;}
.bg-c{background-color: #ccc}
.bg-red{background-color: red}
.bg-blue{background-color: blue}
.bg-green{background-color: green}
.bd{border:1px solid #000;}
section{margin-left: 20px;height: 130px;}
section h1{color: #00a8e6;padding: 5px 0;margin:0;}
.div{margin-bottom: 10px;}
</style>
<body>
<header>
<h1>display:flex</h1>
</header>
<article class="content box box-wrap" style="width: 100%">
<section class=" bd">
<h1>flex:1</h1>
<div class="box w-300">
<div class="flex bg-c">flex:1</div>
<div class="flex bg-green">flex:1</div>
<div class="flex bg-red">flex:1</div>
</div>
</section>
<section class=" bd">
<h1>flex-wrap</h1>
<div class="box flex-wrap w-300">
<div class="w-100 bg-c">1</div>
<div class="w-100 bg-green">2</div>
<div class="w-100 bg-green">3</div>
<div class="w-100 bg-green">4</div>
</div>
</section>
<section class="">
<h1>flex-direction</h1>
<div class="box flex-direction-row w-300 bd">
<div class="w-100 bg-c">1</div>
<div class="w-100 bg-green">2</div>
<div class="w-100 bg-green">3</div>
<div class="w-100 bg-green">4</div>
</div>
<h1>flex-direction-row-reverse</h1>
<div class="box flex-direction-row-reverse w-300 bd">
<div class="w-100 bg-c">1</div>
<div class="w-100 bg-green">2</div>
<div class="w-100 bg-green">3</div>
<div class="w-100 bg-green">4</div>
</div>
<h1>flex-direction-column</h1>
<div class="box flex-direction-column w-300 bd">
<div class="w-100 bg-c">1</div>
<div class="w-100 bg-green">2</div>
<div class="w-100 bg-green">3</div>
<div class="w-100 bg-green">4</div>
</div>
<h1>flex-direction-column-reverse</h1>
<div class="box flex-direction-column-reverse w-300 bd">
<div class="w-100 bg-c">1</div>
<div class="w-100 bg-green">2</div>
<div class="w-100 bg-green">3</div>
<div class="w-100 bg-green">4</div>
</div>
</section>
<section class="">
<h1>justify-content-start</h1>
<div class="box justify-content-start w-300">
<div class="w-50 h30 bg-c">1</div>
<div class="w-50 h30 bg-green">2</div>
<div class="w-50 h30 bg-green">3</div>
<div class="w-50 h30 bg-green">4</div>
</div>
<h1>justify-content-end</h1>
<div class="box justify-content-end w-300 bd" style="height: 80px;">
<div class="w-50 h30 bg-c">1</div>
<div class="w-50 h30 bg-green">2</div>
<div class="w-50 h30 bg-green">3</div>
<div class="w-50 h30 bg-green">4</div>
</div>
<h1>justify-content-center</h1>
<div class="box justify-content-center w-300 bd" style="height: 80px;">
<div class="w-50 h30 bg-c">1</div>
<div class="w-50 h30 bg-green">2</div>
<div class="w-50 h30 bg-green">3</div>
<div class="w-50 h30 bg-green">4</div>
</div>
<h1>justify-content-space-between</h1>
<div class="box justify-content-space-between w-300 bd" style="height: 80px;">
<div class="w-50 h30 bg-c">1</div>
<div class="w-50 h30 bg-green">2</div>
<div class="w-50 h30 bg-green">3</div>
<div class="w-50 h30 bg-green">4</div>
</div>
<h1>justify-content-space-around</h1>
<div class="box justify-content-space-around w-300 bd" style="height: 80px;">
<div class="w-50 h30 bg-c">1</div>
<div class="w-50 h30 bg-green">2</div>
<div class="w-50 h30 bg-green">3</div>
<div class="w-50 h30 bg-green">4</div>
</div>
</section>
<section class="">
<h1>align-items-start</h1>
<div class="box align-items-start w-300 bd" style="height: 80px;">
<div class="w-50 h20 bg-c">1</div>
<div class="w-50 h50 bg-green">2</div>
<div class="w-50 h30 bg-green">3</div>
<div class="w-50 h40 bg-green">4</div>
</div>
<h1>align-items-end</h1>
<div class="box align-items-end w-300 bd" style="height: 80px;">
<div class="w-50 h20 bg-c">1</div>
<div class="w-50 h50 bg-green">2</div>
<div class="w-50 h40 bg-green">3</div>
<div class="w-50 h50 bg-green">4</div>
</div>
<h1>align-items-center</h1>
<div class="box align-items-center w-300 bd" style="height: 80px;">
<div class="w-50 h20 bg-c">1</div>
<div class="w-50 h50 bg-green">2</div>
<div class="w-50 h40 bg-green">3</div>
<div class="w-50 h50 bg-green">4</div>
</div>
<h1>align-items-baseline</h1>
<div class="box align-items-baseline w-300 bd" style="height: 80px;">
<div class="w-50 bg-c">1</div>
<div class="w-50 bg-green">2</div>
<div class="w-50 bg-green">3</div>
<div class="w-50 bg-green">4</div>
</div>
<h1>align-items-stretch</h1>
<div class="box align-items-stretch w-300 bd" style="height: 80px;">
<div class="w-50 bg-c">1</div>
<div class="w-50 bg-green">2</div>
<div class="w-50 bg-green">3</div>
<div class="w-50 bg-green">4</div>
</div>
</section>
<section class="">
<h1>align-content-start 配合 flex-wrap:wrap 使用</h1>
<div class="box align-content-start w-300 bd flex-wrap" style="height: 80px;">
<div class="w-50 h20 bg-c">1</div>
<div class="w-50 h20 bg-green">2</div>
<div class="w-50 h20 bg-green">3</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
</div>
<h1>align-content-end</h1>
<div class="box align-content-end w-300 bd flex-wrap" style="height: 80px;">
<div class="w-50 h20 bg-c">1</div>
<div class="w-50 h20 bg-green">2</div>
<div class="w-50 h20 bg-green">3</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
</div>
<h1>align-content-center</h1>
<div class="box align-content-center w-300 bd flex-wrap" style="height: 80px;">
<div class="w-50 h20 bg-c">1</div>
<div class="w-50 h20 bg-green">2</div>
<div class="w-50 h20 bg-green">3</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
</div>
<h1>align-content-space-between</h1>
<div class="box align-content-space-between w-300 bd flex-wrap" style="height: 80px;">
<div class="w-50 h20 bg-c">1</div>
<div class="w-50 h20 bg-green">2</div>
<div class="w-50 h20 bg-green">3</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
</div>
<h1>align-content-space-around</h1>
<div class="box align-content-space-around w-300 bd flex-wrap" style="height: 80px;">
<div class="w-50 h20 bg-c">1</div>
<div class="w-50 h20 bg-green">2</div>
<div class="w-50 h20 bg-green">3</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
</div>
<h1>align-content-stretch</h1>
<div class="box align-content-stretch w-300 bd flex-wrap" style="height: 80px;">
<div class="w-50 h20 bg-c">1</div>
<div class="w-50 h20 bg-green">2</div>
<div class="w-50 h20 bg-green">3</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
<div class="w-50 h20 bg-green">4</div>
</div>
</section>
</article>
<footer>
</footer>
</body>
</html>