我是HTML

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；子级大小等于盒子大小 -------父级样式生效

 

每个子级的属性

 

posted @ 2017-12-02 13:18  你值得拥有xxx  阅读(1235)  评论(0)  编辑  收藏  举报