zoukankan      html  css  js  c++  java
  • flexbox弹性伸缩布局

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>flexbox弹性伸缩布局</title>
    <style>
    p{150px;border:1px solid #000;margin:5px;padding:5px;background:#eee;}
    div{
    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>

  • 相关阅读:
    系统程序员成长计划内存管理(一)
    系统程序员成长计划工程管理(二)
    嵌入式GUI ftk0.3发布
    嵌入式GUI FTK设计与实现目录
    嵌入式GUI FTK设计与实现分层视图
    sql 临时表的问题
    解惑XP系统IIS无法添加映射之诡异现象
    C#高质量缩略图
    C#图片处理之另存为压缩质量可自己控制的JPEG
    SQL注入
  • 原文地址:https://www.cnblogs.com/annie211/p/6024607.html
Copyright © 2011-2022 走看看