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>

  • 相关阅读:
    day09_request&response学习笔记
    为什么浏览器User-agent(浏览器类型)总是有Mozilla字样?
    无效类字符串:ProgID: Excel.Application
    django2.0升级日记
    Kali Linux信息收集工具
    Kali Linux 工具使用中文说明书
    人手一份核武器
    五大常用算法【转发】
    ACCA AI来袭会议笔记
    2017 Gartner数据科学魔力象限出炉,16位上榜公司花落谁家?
  • 原文地址:https://www.cnblogs.com/annie211/p/6024607.html
Copyright © 2011-2022 走看看