1223作业+Flex小案例（flex容器的6大属性）+10期线上培训

本次是flex小案例——flex容器6大属性的案例完成
以下为具体属性
/1,设置flex容器的主轴方向/
/行向（默认）/
/flex-direction: row;/
/纵向/
/flex-direction: column;/
/2,设置是否换行（是否允许多行）/
/不换行（默认）/
/flex-wrap: nowrap;/
/ 换行/
flex-wrap: wrap;
/3,前两者的组合/
/行向，不换行/
/flex-flow: row nowrap;/
/行向，换行/
/flex-flow: column wrap;/
/4,设置项目在flex容器主轴上的排列方式/
/左对齐/
/justify-content: flex-start;/
/右对齐/
/justify-content: flex-end;/
/居中对齐/
/justify-content: center;/
/ 设置项目主轴上的剩余空间/
/两端对齐/
/justify-content: space-between;/
/分散对齐/
/justify-content: space-around;/
/平均对齐/
/justify-content: space-evenly;/
/5,设置项目在容器的交叉轴上的排列方式/
/顶部对齐/
/align-items: flex-start;/
/底部对齐/
/align-items: flex-end;/
/居中对齐/
/align-items: center;/
/6,设置项目在多行容器交叉轴中的排列方式/
/align-content: space-between;/
/align-content: space-around;/
/align-content: space-evenly;/

以下是独立完成的编码内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex容器的6大属性</title>
    <style>
        .container {
            width: 1200px;
            height: 300px;
            border: 1px dashed;
            background-color: lightcoral;
            display: flex;
            /*1,设置flex容器的主轴方向*/
                /*行向（默认）*/
            flex-direction: row;
                /*纵向*/
            /*flex-direction: column;*/
            /*2,设置是否换行（是否允许多行）*/
                /*不换行（默认）*/
            /*flex-wrap: nowrap;*/
                /*  换行*/
            flex-wrap: wrap;
            /*3,前两者的组合*/
                /*行向，不换行*/
            /*flex-flow: row nowrap;*/
                /*行向，换行*/
            /*flex-flow: column wrap;*/
            /*4,设置项目在flex容器主轴上的排列方式*/
                /*左对齐*/
            /*justify-content: flex-start;*/
                /*右对齐*/
            /*justify-content: flex-end;*/
            /*居中对齐*/
            /*justify-content: center;*/
            /*        设置项目主轴上的剩余空间*/
            /*两端对齐*/
            /*justify-content: space-between;*/
            /*分散对齐*/
            /*justify-content: space-around;*/
            /*平均对齐*/
            /*justify-content: space-evenly;*/
            /*5,设置项目在容器的交叉轴上的排列方式*/
            /*顶部对齐*/
            /*align-items: flex-start;*/
            /*底部对齐*/
            /*align-items: flex-end;*/
            /*居中对齐*/
            /*align-items: center;*/
            /*6,设置项目在多行容器交叉轴中的排列方式*/
            /*align-content: space-between;*/
            align-content: space-around;
            /*align-content: space-evenly;*/
        }
        .items {
            width: 200px;
            height: 100px;
            border: 1px dashed red;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="items">1</span>
        <span class="items">2</span>
        <span class="items">3</span>
        <span class="items">4</span>
        <span class="items">5</span>
        <span class="items">6</span>
        <span class="items">7</span>
    </div>
</body>
</html>

以下是手写与默写的flex容器属性
![![![](https://img.php.cn/upload/image/363/904/701/1577261922735146.jpg)](https://img.php.cn/upload/image/587/204/531/1577261906556050.jpg)](https://img.php.cn/upload/image/553/297/778/1577261891270765.jpg)

相关文章