flexbox弹性伸缩布局

时间:2023-03-09 07:24:11
flexbox弹性伸缩布局

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flexbox弹性伸缩布局</title>
<style>
p{width:150px;border:1px solid #000;margin:5px;padding:5px;background:#eee;}
div{
width:100%;
display:flex; /*首先将容器盒作为块级弹性伸缩盒显示*/
flex-direction:row; /*设置排列方式(column从上到下;row从左到右;row-reverse从右到左;column-reverse:从下到上)*/
flex-wrap:wrap;/*nowrap:默认值,都在一行或一列显示;wrap:当列宽度小于最小宽度时自动换行*/
justify-content:center;/*center:居中;flex-start:靠左;flex-end:靠右;等等*/
align-items:center;/*以中间为基准,清除上下空间 ;flex-start以顶部为基准;flex-end:以底部为基准;baseline:以基准线为基准;stretch:默认,填充整个空间*/
}
p:nth-child(1){
align-self:center;/*单独清理某一项*/
flex:1; /*分配空间,三个加起来总是100%,*/
order:2; /*设置排序*/
}
p:nth-child(2){
flex:3;
order:3;
}
p:nth-child(3){
flex:1;
order:1;
}
</style>
</head>
<body>
<div>
<p>“本”在哪里?徐洪才认为,“本”就是城乡一体化、新兴城镇化过程中一些机制、*的创新,比如户籍制度、社会保障*改革、土地制度改革。</p>
<p>四线城市的土地是充足的,但人口流入少,需求没那么旺盛,所以房地产就有库存问题,而以下城市需求很旺盛,但土地供应不足,供求矛盾很突出。一线城市集中了教育、医疗等资源,还有就业机会。所以人口蜂拥而至。</p>
<p>“这些制度建立好了,大家就没必要往大城市跑了。中国一线城市高房价的病根就在这儿。但这个改革是一个漫长的过程。”徐洪才坦言。</p>
</div>
</body>
</html>