弹性元素（增长因子，缩减因子，基准尺寸） - 学习过程

Home > List of blog posts > 弹性元素（增长因子，缩减因子，基准尺寸）

Blogger Information

Blog 13

fans 1

comment 0

visits 13962

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置弹性元素的增长因子</title>
    <style>
        div {
            width: 500px;
            border: 1px solid black;
            margin: 10px;
        }
        .item {
            box-sizing: border-box;
            background-color: lightseagreen;
            border: 1px solid red;
            padding: 15px;
        }
        .flex {
            display: flex;
        }
        .demo01 {
            flex-grow: 0;
        }
        .demo02 > .item:first-of-type {
            flex-grow: 1;
        }
        .demo03 > .item:first-of-type {
            flex-grow: 1;
        }
        .demo03 > .item:nth-child(2) {
            flex-grow: 1;
        }
        .demo03 > .item:nth-child(3) {
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <h1>flex-grow: 设置弹性元素增长因子</h1>
    <h3>(1): 所有弹性元素不增长,以原始宽度显示,增长因子为: 0(默认)</h3>
    <div class="flex demo01">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>
    <h3>(2): 将全部剩余空间分配给指定弹性元素,例如: 第1个</h3>
    <div class="flex demo02">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>
    <h3>(3): 全部剩余空间按增长因子在不同弹性元素间分配</h3>
    <div class="flex demo03">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置弹性元素的缩减因子</title>
    <style>
        div {
            width: 500px;
            border: 1px solid black;
            margin: 10px;
        }
        .item {
            box-sizing: border-box;
            width: 200px;
            border: 1px solid red;
            background-color: lightcoral;
            padding: 15px;
        }
        .flex {
            display: flex;
        }
        .demo01 >.item {
            flex-shrink: 0;
        }
        .demo02 > .item {
            flex-shrink: 1;
        }
        .demo03 >.item:first-of-type {
            flex-shrink: 1;
        }
        .demo03 > .item:nth-of-type(2) {
            flex-shrink: 4;
        }
        .demo03 > .item:last-child {
            flex-shrink: 5;
        }
        .demo04 >.item:first-of-type {
            flex-shrink: 0.1;
        }
        .demo04 > .item:nth-of-type(2) {
            flex-shrink: 0.5;
        }
        .demo04 > .item:last-child {
            flex-shrink: 1.5;
        }

        .demo05 >.item:first-of-type {
            width: 300px;
            flex-shrink: 1;
        }
        .demo05 > .item:nth-of-type(2) {
            width: 120px;
            flex-shrink: 4;
        }
        .demo05 > .item:last-child {
            width: 200px;
            flex-shrink: 5;
        }
    </style>
</head>
<body>
    <h1>flex-shrink: 设置弹性元素缩减因子</h1>
    <h3>(1): 所有弹性元素不缩减,以原始宽度显示,缩减因子为: 0</h3>
    <div class="flex demo01">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>
    <h3>(2): 所有弹性元素自适应容器宽度且不换行,缩减因子: 1 (默认)</h3>
    <div class="flex demo02">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>
    <h3>(3): 当三个弹性元素的缩减因为子不相等时</h3>
    <div class="flex demo03">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <h3>(4): 缩减因子也可以是小数,只要大于就可以</h3>
    <div class="flex demo04">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <h3>(5): 当每个弹性元素宽度不一样时, 完全是另一道风景线</h3>
    <div class="flex demo05">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置弹性元素的基准尺寸</title>
    <style>
        div {
            box-sizing: border-box;
            width: 500px;
            border: 1px solid black;
            margin: 10px;
        }
        .item {
            box-sizing: border-box;
            border: 1px solid red;
            background-color: lightgoldenrodyellow;
            padding: 15px;
        }
        .flex {
            display: flex;
        }
        .demo01 > .item {
            flex-basis: content;
        }
        .demo02 > .item {
            width: 100px;
        }
        .demo03 > .item {
            flex-basis: auto;
        }
        .demo04 > .item {
            width: 100px;
            flex-basis: 150px;
        }
        .demo05 > .item:first-of-type {
            flex-basis:20%;
        }
        .demo05 > .item:nth-of-type(2) {
            flex-basis: 30%;
        }
        .demo05 > .item:nth-of-type(3) {
            flex-basis: 50%;
        }
    </style>
</head>
<body>
    <h1>flex-basis: 设置弹性元素的基准尺寸</h1>

    <h3>(1): 在未设置弹性元素宽度时, 以内容宽度显示</h3>
    <div class="flex demo01">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <h3>(2): 存在自定义元素宽度时,则以该宽度显示</h3>
    <div class="flex demo02">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <h3>(3): 自动状态下, 由浏览器根据预设值自行判定</h3>
    <div class="flex demo03">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <h3>(4): 当元素存在自定义宽度与基准宽度时, 以基准宽度为准 </h3>
    <div class="flex demo04">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <h3>(5): 元素基准宽度支持百分比设置 </h3>
    <div class="flex demo05">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简化弹性元素的基本设置</title>
    <style>
        div {
            box-sizing: border-box;
            width: 500px;
            border: 1px solid black;
            margin: 10px;
        }
        .item {
            box-sizing: border-box;
            border: 1px solid red;
            background-color: lightslategrey;
            padding: 16px;
        }
        .flex {
            display: flex;
        }
        .demo01 > .item {
            width: 100px;
            height: 50px;
            /*flex: 0 1 auto;*/
            flex: initial;
        }
        .demo02 > .item {
            width: 30px;
            height: 60px;
            /*flex: 1 0 auto;*/
            flex: auto;
        }

        .demo03 > .item {
            width: 150px;
            height: 50px;
            /*flex: 0 0 auto;*/
            flex: none;
        }

        .demo04 > .item {
            width: 100px;
            height: 60px;
            flex: 1;
        }

        .demo05 > .item {
            width: 150px;
            height: 50px;
            flex: 0 1 100px;
        }

        .demo06 > .item:first-of-type {
            flex: 1 1 auto;
        }
    </style>
</head>
<body>
    <h1>简化弹性元素的基本设置</h1>

    <h3>(1): 根据宽度计算,允许缩减适应容器</h3>
    <div class="flex demo01">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <h3>(2): 根据宽度计算,元素完全弹性以适应容器</h3>
    <div class="flex demo02">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <h3>(3): 元素完全失去弹性, 以原始大小呈现</h3>
    <div class="flex demo03">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <h3>(4): 一个数值表示增长因子,其它值默认: flex: 1 1 auto</h3>
    <div class="flex demo04">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <h3>(5): 第三个有具体数值时, 以它为计算标准</h3>
    <div class="flex demo05">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>

    <h3>(6): 单独设置某一个元素弹性大小 </h3>
    <div class="flex demo06">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

将flex属性的用法, 手抄, 建议二遍以上

自学:align-self, order的用法

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单独设置元素在交叉轴上排列方式</title>
    <style>
        div {
            width: 500px;
            height: 300px;
            box-sizing: border-box;
            border: 1px solid black;
            background-color: lightcoral;
            margin: 10px;
        }
        .item {
            width: 100px;
            height: 50px;
            box-sizing: border-box;
            border: 1px solid red;
            background-color: lightgreen;
            padding: 15px;
        }
        .flex {
            display: flex;
            flex-flow: column;
            align-items: flex-end;
        }
        .flex > .item:first-of-type {
            align-self: center;
        }
        .flex > .item:nth-of-type(2) {
            width: 100%;
            background-color: lightslategrey;
        }
        .flex > .item:nth-of-type(3) {
            align-self: flex-start;
        }
    </style>
</head>
<body>
    <h1>单独设置元素在交叉轴上排列方式</h1>

    <div class="flex">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
    </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>order</title>
    <style>
        div {
            width: 500px;
            height: 300px;
            border: 1px solid red;
            margin: 10px 0;
        }
        .flex {
            display: flex;
        }
        .item {
            height: 50px;
            border: 1px solid black;
            color: black;
            padding: 10px;

        }

        .flex > .item:first-of-type {
            order: 3;
        }
        .flex > .item:nth-of-type(2)
        {
            order: 1;
        }
        .flex > .item:nth-of-type(3)
        {
            order: 2;
        }
    </style>
</head>
<body>
<div class="flex">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>



</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

试着将之前的一些案例用flex布局改定, 例如圣杯布局

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4. 试着将之前的一些案例用flex布局改定, 例如圣杯布局</title>
    <style>
        header {
            height: 50px;
            background-color: lightslategray;
        }
        main {
            display: flex;
            box-sizing: border-box;
            height: 600px;
            background-color: lightcoral;
        }
        article {
            flex-grow: 6;
            width: 200px;
            height: 600px;
            background-color: lightgoldenrodyellow;
        }
        footer {
            height: 50px;
            background-color: lightskyblue;
        }

        aside {
            width: 100px;
            height: 600px;
            flex-grow: 2;
        }
        main>aside:last-of-type {
            justify-content: flex-end;
            background-color: lightseagreen;
        }
        main>aside:first-of-type {
            justify-content: flex-start;
            background-color: lawngreen;
            order: -1;

        }
    </style>
</head>
<body>
    <header>头部</header>
    <main>
        <article>内容区</article>
        <aside>左侧</aside>
        <aside>右侧</aside>
    </main>
    <footer>底部</footer>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结

flex-grow(增长因子)

flex-shrink（缩减因子）

flex-basis（基准尺寸）

笔记

Correction status：qualified

Teacher's comments：代码整齐 , 手写认真, 坚持

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

HTML常用标签(基础标签使用实例)

2019-10-30 11:20:57