CSS: 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>flex布局：容器上的属性</title>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* flex容器 */
        .container{
            display: flex;
            height: 20em;
            border: 1px solid #000;
        }
        .container > .item{
            /* flex容器中的“子元素”则成了“弹性项目/flex项目” */
            width:10em;
            padding: 1em;
            height: 10em;
            background-color: lightcyan;
            border: 1px solid #000;
        }
        .container{
            /* 1  用在容器中的属性 */
            /* flex-direction: row;  */
            /* 默认 */
            /* flex-direction: column; */
            /* flex-wrap: wrap; */
            /* flex-flow: row wrap; */
            /* 是否允许换行 */
            flex-flow: row nowrap;
            /* 2  剩余空间的设置 */
            /* place-content: start;
            place-content: end; */
            /* place-content: center center; */
            /* 两端对齐 */
            /* place-content: space-between;
            /* 分散对齐 */
            /* place-content: space-around; */
            /* 平均对齐 */
            /* place-content: space-evenly; */
            /* 3 垂直轴的对齐 */
            place-items: stretch;
            place-items:start;
            place-items:end;
            place-items:center;
            /* flex容器只需要记住三个属性 */
            /* 1. flex-flow 主轴方向，换行
            2. place-content: 项目在主轴上的排列与空间分配;
            3.place-items项目在交叉轴上的对齐 */
        }
    </style>
</body>
</html>
更多相关文章

随机推荐
