flex的使用

html&css

发布日期: 2020-09-23

文章字数: 521

阅读时长: 2 分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
    <title>头部</title>
    <style type="text/css">
        html {}

        * {
            margin: 0;
            padding: 0;
        }

        img {
            display: block;
        }

        .header {

            display: flex;
            flex-direction: column;
        }

        .header .right,
        .attached {
            height: 200px;
            background-color: yellow;
        }

        .header .left {
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<!-- flex布局是一种布局模型，经常被称之为flexbox，使用flex布局之后，他会给子元素提供强大空间分配和对齐能力。
            
在没有使用flex布局之前，常用布局有：流式布局（默认），浮动布局，定位布局等等。缺陷是子元素需要自己控制自己在父元素中的位置，还要注意父元素高度坍塌。
            
flex的优点就是避免不灵活的布局形式，创建更多种布局模式供你选择，解决了子元素的对齐和分布与 响应式等问题。缺点是只能依靠自身的布局模式，稍有变化则无法改变。

 flex布局可能会造成画面抖动，不同环境下，造成的原因也不一样，可以试试设置最小高度，和尝试其它布局 -->

<body>
    <div class="header">
        <a class="right">
            <a href="https://www.runoob.com/w3cnote/flex-grammar.html">菜鸟</a>
        </a>
        <a class="left">

            flex属性分为容器的属性和项目的属性，其中容器的属性align-content对多行起作用，align-item对单行起作用，两个属性的属性值一样，默认都是stretch填充完整个容器
        </a>
        <a class="attached">
            order flex-grow flex-shrink flex-basis flex align-self 设置在项目下<br>
            flex是flex-grow flex-shrink flex-basis的简写<br>
            order:1 值为证书 越大越靠后<br>
            align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
        </a>
    </div>
</body>

</html>