欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS 弹性布局 flex

程序员文章站 2022-04-30 09:09:46
...

弹性布局 display:flex;
居中等分 justify-content:center;
布局方向(方向 direction;行 row;列 column) flex-direction:column;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>flex 弹性布局</title>
    <meta name="Keywords" content="关键字">
    <meta name="description" content="简介">
    <!-- 弹性布局 display:flex;
        居中等分 justify-content:center;
        布局方向(方向 direction;行 row;列 column) flex-direction:column;
     -->
    <style>
        .box {
            /*弹性布局 flex*/
            display: flex;
            /*居中等分*/
            /*justify-content: center;*/
            /*justify-content: space-around;*/
        }

        .box span {
            flex: 1;
            height: 100px;
            /*background-color: aqua;*/
            margin: 5px;
            /*width: 300px;*/
        }

        .ad span {
            margin: 2px;
            width: 300px;
            /*height: 150px;*/
            flex: 1;
        }

        .ad {
            height: 500px;
            /*弹性布局*/
            display: flex;
            /*布局方向(方向 direction) flex-direction:column;行(row) 列(column)*/
            flex-direction: column;
        }
    </style>
</head>
<body>
<div class="box">
    <span style="background-color: green">s1</span>
    <span style="background-color: pink">s2</span>
    <span style="flex:3;background-color: #10f574">s3</span>
    <span style="background-color: deepskyblue">s4</span>
</div>
<div class="ad">
    <span style="background-color: forestgreen"></span>
    <span style="background-color: palevioletred"></span>
    <span style="background-color: blueviolet"></span>
</div>
</body>
</html>
相关标签： CSS css html html5

上一篇： php高级编程-函数-郑阿奇

下一篇： Async/Await语法糖

推荐阅读