文章出處
文章列表
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FLEX</title>
</head>
<body>
<style>
footer{
display:flex;
flex-flow:row wrap;
align-items: stretch;
/*
justify-content : flex-end;
主軸排列方式
*/
/*
justify-content : flex-start;
*/
justify-content : center;
/*
justify-content : space-between;
*/
align-content : flex-start;
/*
側軸排列方式
flex-end ： 開頭
center 中心
space-between 均勻排列
space-around 另一種均勻排列
stretch 伸縮排列
*/
}
div{
/*
flex: 1 0 7rem;
width:15%;
*/
}
div:nth-child(1){
/*flex和在sencha里面的flex一樣的
flex-grow flex-shrink flex-basis;
*/
flex : 1;
}
div:nth-child(2){
/*
在不改變結構的情況下，更改頁面排列方式
*/
order : 1;
flex : 2
}
</style>
<!--
神奇的flex布局..
-->
<footer>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</footer>
</body>
</html>
文章列表
全站熱搜
留言列表
