Flex常用属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .item-container {
            width: 100%;
            height: 800px;
            border: 5px solid rgb(11, 125, 240);
            display: flex; /* flex  inline */
            /* flex-direction: column; column纵向排列，默认row */
            /* flex-direction: row; */
            /* 是否换行，默认nowrap */
            /* flex-wrap: wrap;  */
            /* flex-flow是flex-direction和flex-wrap的简写 */
            flex-flow: row wrap;
            /* justify-content: center; 把所有元素化为一个整体的水平对齐方式 */
            /* justify-items: center; */
            /* align-content: center; 在有多行且有剩余空间时，把所有元素化为一个整体的对齐方式 */
            /* align-items: center; 把每一个单独元素作为一个整体的对齐方式，空间缩小后，元素的上下会有空白 */
            /* place-content是align-content和justify-content的简写，2个参数 
            项目在主轴上的排列与剩余空间分配，换行无间距 */
            /* place-content: center; */
            place-content: space-around space-between;
            /* place-items是align-items和justify-items的简写，2个参数 
            项目在交叉轴上的对齐方式*/
            /* place-items: end; */
        }
        .item{
            color: #fff;
            text-align: center;
            font-size: 20px;
            padding: 100px;
        }
        .item1{
            background: orange;
            /* order 子元素的排序，默认为0，数值越大越往后，可为负数 */
            order: 10;
        }
        .item2{
            background: rgb(135, 222, 136);
            /* 更改某个元素的对齐 */
            place-self: center;
        }
        .item3{
            background: red;
            font-size: 10px;
        }
        .item4{
            background: rgb(144, 19, 129);
            font-size: 80px;
            /* flex: 放大因子 收缩因子 计算宽度  默认：0 1 auto*/
            flex: 1 1 12rem;
        }
        .item5{
            background: rgb(18, 28, 171);
            /* 默认0，根据元素进行尺寸放大缩小 */
            flex-grow: 1;
        }
        p {
            margin-top: 250px;
        }
    </style>
</head>
<body>
    <div class="item-container">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
        <div class="item item4">item4</div>
        <div class="item item5">item5</div>
    </div>
</body>
</html>
相关文章
