简单的flex 响应式布局

<!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>Title</title>
    <style>
        ul{
            display: flex; /*外部容器设置为flex布局 内部才能进行布局操作*/
            flex-direction: row;/*表示元素的走向*/
            flex-wrap:wrap;/*声明元素是否换行*/

            /* 在横轴上的对齐方式
             * |flex-start:左对齐|flex-end:右对齐|center:横向居中对齐|space-between:左右两端对齐|space-around:同行元素间距相等|
             * (只有在不设置 flex-grow 时才起作用)
             */
            justify-content: space-around;

            /* 在纵轴上的对齐方式
             * |flex-start:上对齐|flex-end:下对齐|center:纵向居中对齐|baseline:项目的第一行文字的基线对齐|stretch:[默认]|
             * (只有在元素和元素的高度不一样时才体现出来)
             */
            align-items:stretch;

            /*
             * 轴线对齐方式
             * flex-start：与交叉轴的起点对齐。
             * flex-end：与交叉轴的终点对齐。
             * center：与交叉轴的中点对齐。
             * space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
             * space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
             */
            align-content:space-around;

            list-style-type:none;
            padding:0;
        }
        li{
            height:300px;
            /* flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，
               则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。*/
            flex-grow:1;
            text-align: center;
            margin:15px;
            border: 1px solid red;
            background: #c6c7c9;
        }
        .lio{
            /*width:300px;*/
            /*height: 300px;*/

            /*flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性,计算主轴是否有多余空间。
              它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。*/
            flex-basis:300px;

            /*order: 2;   !*表示元素的显示,和 z-index 的原理差不多,这个是用来控制元素排列顺序先后,不同的是数值越小排列越靠前*!*/
        }
        .liw{
            /*width:600px;*/
            /*height:600px;*/
            flex-basis:600px;
            /*order: 1;   !*表示元素的显示,和 z-index 的原理差不多,这个是用来控制元素排列顺序先后,不同的是数值越小排列越靠前*!*/
        }
    </style>
</head>
<body>
<ul>
    <li class="lio">1</li>
    <li class="liw">2</li>
    <li class="lio">3</li>
    <li class="liw">4</li>
    <li class="lio">5</li>
    <li class="liw">6</li>
    <li class="lio">7</li>
    <li class="liw">8</li>
    <li class="lio">9</li>
    <li class="liw">10</li>
    <li class="lio">11</li>
    <li class="liw">12</li>
    <li class="lio">13</li>
    <li class="liw">14</li>
</ul>
</body>
</html>
简单的flex 响应式布局

猜你喜欢
