zoukankan      html  css  js  c++  java
  • css display flew 伸缩盒模型

    父级容器属

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    
        <style>
            /**
            父级的几个属性
            flex-direction ——》 属性决定主轴的方向(横着还是竖着)  row | row-reverse | column | column-reverse;
            flex-wrap-》  一行排不下是否换行 nowrap | wrap(换行 第一行在上) | wrap-reverse(换行第一行在下);
            flex-flow -》上面两个属性的集合
            justify-content-》 属性定义了项目在主轴(x轴)上的对齐方式。
                                     flex-start(左端对齐) |
                                     flex-end(右端对齐) |
                                     center(居中对齐) |
                                     space-between ( 每一排 左右盒子紧挨边界盒子们间距相等)|
                                     space-around;( 每一排 每个盒子左右两侧间距恒等)
            align-items-》 属性定义项目在交叉轴(Y轴)上如何对齐。
                            flex-start (顶部对齐 注意 :如  flex-wrap:column-reverse,则底部对齐)|------------------------
                            flex-end (底部对齐)|
                            center | (上下居中)
                            baseline (文字基线对齐)|
                            stretch (盒子高变为父级宽,设置了敢赌除外);
            align-content -》属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。(适用于非一条x垂直对齐方式)
                            flex-start (顶部对齐)|
                            flex-end 底部对齐|
                            center 垂直居中|
                            space-between垂直居中(上下紧挨着顶与低) |
                            space-around 垂直对齐 上下间距相等 |
                            stretch;轴线占满整个交叉轴。(每行下间距相等 首行顶部挨顶)
    
            */
            * {
                margin:0;
                padding: 0;
                list-style: none;
            }
            .wrap{
                width: 100%;
                height: 800px;
                background-color: #fcfccc;
            }
            ul{
                display: flex;
                flex-flow: row wrap;
                justify-content:  space-around;
                align-items: baseline;
                height: 800px;
                align-content:stretch;
    
    
            }
            li{
                flex-grow: 1;
                margin: 3px;
                background-color: red;
                text-align: center;
                min-width: 300px;
                max-width: 500px;
            }
            
    
        </style>
    </head>
    <body>
    
    <div class="wrap">
        <ul>
            <li>01</li>
            <li>01</li>
            <li>01</li>
            <li>01</li><li>01</li>
            <li>01</li>
            <li>01</li>
            <li>01</li><li>01</li>
            <li>01</li>
            <li>01</li>
            <li>01</li>
            <li>01</li>
            <li>01</li>
            <li style="height: 100px;padding-top: 30px">02</li>
            <li>03</li>
            <!--<li>04</li>-->
            <!--<li>05</li>-->
            <!--<li>07</li>-->
    
        </ul>
    </div>
    </body>
    </html>

    注意: 当父级 display:flew ;子级无 display :flew-grow:1;子级大小等于盒子大小 -------父级样式生效

    每个子级的属性

  • 相关阅读:
    Creating a generic Web Parts for hosting ASP.NET User Controls
    Speed Up SQL Server Apps 提高SQL Server应用程序的运行效率 (Part 1)
    How to use CreateChildContorls method inherited from System.Web.UI.Control
    How to quickly access Web Part Management Page
    SQL Script tips for MS SQL Server
    How to enable single signon service on the SPS
    A brief summary of UML & Rational Rose – Use Case Diagram, Part II
    Borland Together for Visual Studio.Net V2.0 安装问题
    Speed Up SQL Server Apps 提高SQL Server应用程序的运行效率 (Part 2)
    体验ReSharper V1.0 for VS.Net 2003 Part I
  • 原文地址:https://www.cnblogs.com/aqigogogo/p/7953769.html
Copyright © 2011-2022 走看看