lovecoding
/
W260426


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        /* 弹性布局 flex */
        .box{
            border:3px dashed black;
        }
        /* flex 布局 如果要控制多个元素实现弹性布局，需要给父元素使用display:flex; */
        /* flex 默认排列方向为水平方向 */
        .box ul{
            width: 100%;
            /* height: 500px; */
            display: flex;
            /* flex 布局分为主轴和交叉轴 主轴默认方向为水平方向 交叉轴默认方向为垂直方向  */
            /* justify-content 可以实现flex元素 在主轴方向上的对齐方式  center 居中对齐  flex-start 左对齐  flex-end 右对齐  space-between 两端对齐  space-around 等间距对齐  */
            /* justify-content: space-around; */

            /* align-items 可以实现flex元素 在交叉轴方向上的对齐方式  center 居中对齐  flex-start 顶部对齐  flex-end 底部对齐 */
            /* align-items: center; */

            /* 修改主轴方向 flex-direction 可以实现flex元素 在主轴方向上的对齐方式  row 水平方向    column 垂直方向    */
            /* flex-direction: column; */

            /* 默认情况下 如果flex元素一行装不下，会压缩元素使其适应父元素宽度 */
            /* 如果不希望压缩元素，可以使用flex-wrap: wrap; 来让元素换行 */
            /* flex-wrap: wrap; */

            /* align-content 可以实现多条轴的对齐方式  center 居中对齐  flex-start 顶部对齐  flex-end 底部对齐 space-between 两端对齐  space-around 等间距对齐  */
            /* align-content: space-between; */

        }
        .box li{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            color: white;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            line-height: 100px;
        }
        /* flex 对于单个元素的控制 */
        /* 控制显示顺序 */
        li:nth-child(3){
            /* order 可以实现flex元素 在flex布局中的显示顺序  数值越大排列越靠后   */
            /* order: -1; */
            
            /* align-self 可以实现flex元素 在交叉轴方向上的对齐方式  flex-start 顶部对齐  flex-end 底部对齐  center 居中对齐  */
            /* align-self: center; */
            
            /* flex-shrink 可以实现flex元素 在主轴方向上的压缩比例  默认值为1 如果设置为0，元素不会压缩  */
            /* flex-shrink: 0; */
        }
        .box2 li{
            /* flex-grow 可以实现flex元素 在主轴方向上的扩展比例  默认值为0 如果设置为1，元素会扩展以适应父元素宽度 将空白区域等分给各个元素 */
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <!-- <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li> -->
        </ul>
    </div>
    <div class="box box2">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
</html>