HTML5弹性布局 | 易学教程

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="俞书楠">
    <title></title>
    <style>
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
            font-size: 60px;
            /* 开启弹性布局：给元素设置弹性布局之后，会让其他的对齐方式失效 */
            display: flex;
            /* 
            1.弹性布局中，把开启弹性布局的元素称为 容器，弹性布局中的所有子元素称为 项目；
            2.弹性布局的容器有两根轴：主轴和交叉轴，主轴的方向默认是水平从左往右，交叉轴与主轴垂直，默认方向是垂直从上往下；
            3.弹性布局中项目的尺寸，默认情况下(不设置宽高)，占据主轴方向的尺寸是内容的大小，占据交叉轴方向的尺寸尽量铺满整个容器
             */
            /* 改变主轴的方向 */
            /* row: 默认值：主轴水平从左往右 */
            /* flex-direction: row; */
            /* row-reverse: 与row反向 */
            /* flex-direction: row-reverse; */
            /* column: 主轴垂直从上往下 */
            /* flex-direction: column; */
            /* column-reverse: 与column反向 */
            /* flex-direction: column-reverse; */
        }
        div{
            border: 1px solid red;
            /* height: 200px; */
            /* 设置项目伸缩基准：理想状态下占据主轴方向多大空间
            默认情况下主轴水平从左往右：当不设置flex-basis的时候，元素会根据width渲染宽度，也没有width，元素就根据自身的宽度进行渲染 */
            flex-basis: 20%;
            width: 300px;
        }
        /* order：默认值是0，支持负数，改变弹性布局中项目出现的顺序，值越小越靠前 */
        /* div:nth-child(2){
            order: -2;
        }
        div:nth-child(3){
            order: 3;
        } */
    </style>
</head>
<body>
    <div>春</div>
    <div>夏</div>
    <div>秋</div>
    <div>冬</div>
</body>
</html>
来源：CSDN
作者：qiansixi
链接：https://blog.csdn.net/qiansixi/article/details/103835853
标签
弹性