弹性布局之弹性容器---PHP九期线上班 - 作业

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 弹性布局之弹性容器---PHP九期线上班

博主信息

博文 27

粉丝 2

访问量 25080

专题推荐

更多>

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .rongqi{
            border:2px dashed red;
            margin:20px;
            background:lightblue;
        }
        .item{
            box-sizing:border-box;
            padding:20px;
            background:lightpink;
            border:1px solid green;
        }
        .flex{
            display:flex;
        }
        .inline-flex{
            display:inline-flex;
        }
    </style>
</head>
<body>
<h3 style="text-align: center">1.块级弹性容器</h3>
<div class="rongqi flex">

    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3 style="text-align: center">2.行内块级弹性容器</h3>
<div class="rongqi inline-flex">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
</body>
</html>

运行实例 »

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

运行结果图:

手写代码:

2.弹性盒子做导航

主要代码用到a标签的动作,

a:hover,鼠标指针移动到元素上

a:focus 获得焦点的时候鼠标松开时显示的颜色

a:active 当前活动元素鼠标在元素上按下还没有松开

display:flex;弹性布局

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒子做导航</title>
    <style>
        a{
            text-decoration: none;
            color:white;
            background: lightgreen;
            border-radius:5px 5px 0 0;
            margin: 0 5px;
            padding: 10px;
        }
        a:hover,
        a:focus,
        a:active{
            background: plum;
            color:black;
        }
        nav{
            display:flex;
            border-bottom:1px solid gray;
        }
    </style>
</head>
<body>
<nav>
    <a href="#">首页</a>
    <a href="#">教学视频</a>
    <a href="#">社区问答</a>
    <a href="#">软件下载</a>
    <a href="#">联系我们</a>
</nav>
</body>
</html>

运行实例 »

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

运行结果图:

手写代码:

3.定义弹性容器的主轴方向: 弹性元素的主轴上的排列方向

主要用到四个代码:

flex-direction:row;从左往右排序(默认)

flex-direction:row-reverse;从右往左排序

flex-direction:column;从上往下排序

flex-direction:column-reverse;从下往上排序

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义弹性容器的主轴方向: 弹性元素的主轴上的排列方向</title>
    <style>
        .rongqi{
            border:2px dashed red;
            margin:20px;
            background:lightblue;
        }
        .item{
            box-sizing:border-box;
            padding:20px;
            background:lightpink;
            border:1px solid green;
        }
        .flex{
            display:flex;
        }
        .row{
            flex-direction:row;
        }
        .row-reverse{
            flex-direction:row-reverse;
        }
        .column{
            flex-direction:column;
        }
        .column-reverse{
            flex-direction:column-reverse;
        }
    </style>
</head>
<body>
<h3>从左往右排序</h3>
<div class="rongqi flex row">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>从右往左排序</h3>
<div class="rongqi flex row-reverse">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>从上往下排序</h3>
<div class="rongqi flex column">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>从下往上排序</h3>
<div class="rongqi flex column-reverse">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
</body>
</html>

运行实例 »

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

运行结果图:

手写代码:

4.制作弹性网站首页

用到display:flex 布局,flex-direction:column排序

注意版权号应当输入字符©

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建网站首页</title>
    <style>
        *{

            padding: 10px;
        }
        a{
            text-decoration: none;
            color:white;
            background: lightgreen;
            border-radius:5px 5px 0 0;
            margin: 0 5px;
            padding: 10px;
            margin-bottom:-10px;
        }
        a:hover,
        a:focus,
        a:active{
            background: plum;
            color:black;

        }
        nav{
            display:flex;
            border-bottom:1px solid gray;

        }
        header,nav,main,article,footer{
            display:flex;
        }
        article{
            flex-direction:column;
            border-bottom:1px solid gray;
        }
    </style>
</head>
<body>
<header>
    <h1>一丁的博客</h1>
</header>
<nav>
    <a href="#">首页</a>
    <a href="#">教学视频</a>
    <a href="#">社区问答</a>
    <a href="#">软件下载</a>
    <a href="#">联系我们</a>
</nav>
<main>
<article>
    <img src="images/1.jpg" alt="Vue">
    <p>Vue是一套用于构建用户界面的渐进式框架, 被设计为可以自底向上逐层应用。</p>
    <button>立即报名</button>
</article>
    
    <article>
        <img src="images/2.jpg" alt="JS">
        <p>JavaScript 是一门弱类型的动态脚本语言，支持多种编程范式，包括面向对象和函数式编程，被广泛用于 Web 开发。</p>
        <button>立即报名</button>
    </article>
    <article>
        <img src="images/3.jpg" alt="Larave">
        <p>Laravel是一套简洁,优雅的PHP Web开发框架, 它可以帮你构建一个完美的网络APP</p>
        <button>立即报名</button>
    </article>
</main>
<footer>
    Copyright © 2018-2022 草莓网
</footer>
</body>
</html>

运行实例 »

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

运行结果图:

手写代码:

5.弹性元素溢出与创建多行容器

使用到几个主要代码:

flex-wrap:nowrap;挤出去也不换行(默认就是)

flex-wrap:wrap;换行排序,元素放不下后开始下一行开始排序

flex-wrap:wrap-reverse;垂直方向反向排序;

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性元素溢出与创建多行容器</title>
    <style>
        .rongqi{
            border:4px dashed red;
            margin:20px;
            background:lightblue;
            width: 500px;
        }
        .item{
            box-sizing:border-box;
            padding:20px;
            background:lightpink;
            border:1px solid green;
        }
        .flex{
            display:flex;
        }
        .nowrap{
            flex-wrap:nowrap;
        }
        .wrap{
            flex-wrap:wrap;
        }
        .wrap-reverse{
            flex-wrap:wrap-reverse;
        }
       </style>
</head>
<body>
<h2>不换行(默认)</h2>
<div class="rongqi flex nowrap">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
    <span class="item">item8</span>
</div>
<h2>换行</h2>
<div class="rongqi flex wrap">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
    <span class="item">item8</span>
</div>
<h2>换行并且垂直方向颠倒排序</h2>
<div class="rongqi flex wrap-reverse">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
    <span class="item">item8</span>
</div>
</body>
</html>

运行实例 »

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

运行结果图:

手写代码:

6.弹性元素流体布局(简称:弹性流)的简化

把flex-direction和flex-wrap合并成flex-flow

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性元素溢出与创建多行容器</title>
    <style>
        .rongqi{
            border:4px dashed red;
            margin:20px;
            background:lightblue;
            width: 500px;
        }
        .item{
            box-sizing:border-box;
            padding:20px;
            background:lightpink;
            border:1px solid green;
        }
        .flex{
            display:flex;
        }
        .nowrap{
           flex-flow:row nowrap;
        }
        .wrap{
            flex-flow:row wrap;
        }
        .wrap-reverse{
            flex-flow:row wrap-reverse;
        }

       </style>
</head>
<body>
<h2>不换行(默认)</h2>
<div class="rongqi flex nowrap">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
    <span class="item">item8</span>
    <span class="item">item9</span>
    <span class="item">item10</span>
    <span class="item">item11</span>
    <span class="item">item12</span>
</div>
<h2>换行</h2>
<div class="rongqi flex wrap">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
    <span class="item">item8</span>
    <span class="item">item9</span>
    <span class="item">item10</span>
    <span class="item">item11</span>
    <span class="item">item12</span>
</div>
<h2>换行并且垂直方向颠倒排序</h2>
<div class="rongqi flex wrap-reverse">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
    <span class="item">item8</span>
    <span class="item">item9</span>
    <span class="item">item10</span>
    <span class="item">item11</span>
    <span class="item">item12</span>
</div>
</body>
</html>

运行实例 »

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

运行结果图:

手写代码:

7.弹性元素在主轴上如何分布

用到几个主要代码:

justify-content:flex-start; 主轴开始水平排列

justify-content:flex-end;主轴终点水平排列

justify-content:center;主轴居中开始排列

justify-content:space-between;首尾紧贴起点终点,其它元素平均分配剩余空间;

justify-content:space-around;每个元素占用空间大小一样,相邻空间会叠加;

justify-content:space-evenly;每个元素空间平均分配;

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性元素在主轴上如何分布</title>
    <style>
        .rongqi{
            border:4px dashed red;
            margin:20px;
            background:lightblue;
            width: 500px;
        }
        .item{
            box-sizing:border-box;
            padding:20px;
            background:lightpink;
            border:1px solid green;
        }
        .flex{
            display:flex;
        }
       .flex-start{
           justify-content: flex-start;
       }
        .flex-end{
            justify-content:flex-end;
        }
        .wrap{
            flex-wrap:wrap;
        }
        .center{
            justify-content:center;
        }
        .space-between{
            justify-content:space-between;
        }
        .space-around{
            justify-content:space-around;
        }
        .space-evenly{
            justify-content:space-evenly;
        }
    </style>
</head>
<body>
<h2>1.flex-start:主轴起点开始水平排列</h2>

</div>
<p>多行</p>
<div class="rongqi flex flex-start wrap">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>

</div>
<h2>2.flex-end:主轴终点开始水平排列</h2>

</div>
<p>多行</p>
<div class="rongqi flex flex-end wrap">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>
<h2>3.flex-start:主轴居中开始排列</h2>

</div>
<p>多行</p>
<div class="rongqi flex center wrap">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>
<h2>4.space-between:首尾元素紧贴起点终点,其它元素平均分配剩余空间</h2>
</div>
<p>多行</p>
<div class="rongqi flex space-between wrap">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>
<h2>5.space-around:每个元素两边空间相等,相邻元素空间累加</h2>
</div>
<p>单行</p>
<div class="rongqi flex space-around wrap">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<p>多行</p>
<div class="rongqi flex space-around wrap">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>
<h2>6.space-evenly:每个元素,以及元素到起止点空间全部相等</h2>
</div>
<p>单行</p>
<div class="rongqi flex space-evenly wrap">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<p>多行</p>
<div class="rongqi flex space-evenly wrap">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>
</body>
</html>

运行实例 »

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

运行结果图:

手写代码:

8.使用弹性元素主轴对齐来改写导航

运用justify-content:center或者其它参数,改变导航显示位置

代码公司:

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用弹性元素主轴对齐来改写导航</title>
    <style>
        a{
            text-decoration: none;
            color:white;
            background: lightgreen;
            border-radius:5px 5px 0 0;
            margin: 0 5px;
            padding: 10px;
        }
        a:hover,
        a:focus,
        a:active{
            background: plum;
            color:black;
        }
        nav{
            display:flex;
            border-bottom:1px solid gray;
            justify-content:center;
        }
    </style>
</head>
<body>
<nav>
    <a href="#">首页</a>
    <a href="#">教学视频</a>
    <a href="#">社区问答</a>
    <a href="#">软件下载</a>
    <a href="#">联系我们</a>
</nav>
</body>
</html>

运行实例 »

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

运行结果图:

9.弹性元素在垂直方向(交叉轴)上的对齐方式

交叉轴用到的代码:

align-items:stretch;默认就是这个.自适应高度

align-items:flex-start;起点开始排序

align-items:flex-end;终点开始排序

align-items:center;居中开始排序

align-content:space-between;垂直方向首尾贴紧,其它剩余空间平均分配.

align-content:space-around;垂直方向每个元素空间相等,相邻空间累加

align-content:space-evenly;垂直每个元素空间全部相等;

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性元素在垂直方向(交叉轴)上的对齐方式</title>
    <style>
    .rongqi{
    border:4px dashed red;
    margin:20px;
    background:lightblue;
    width: 500px;
        height:200px;
    }
    .item{
    box-sizing:border-box;
    padding:20px;
    background:lightpink;
    border:1px solid green;
    }
    .flex{
    display:flex;
    }
    .wrap{
        flex-wrap: wrap;
    }
    .stretch{
        justify-content:stretch;
    }
        .wrap-stretch{
            align-items: stretch;
        }
        .flex-start{
            align-items:flex-start;
        }
        .flex-end{
            align-items:flex-end;
        }
        .center{
            align-items:center;
        }
        .space-between{
            align-content:space-between;
        }
        .space-around{
            align-content:space-around;
        }
        .space-evenly{
            align-content:space-evenly;
        }
        .all-center{
            justify-content:space-around;
            align-content:space-around;
        }
    </style>
</head>
<body>
<h1>弹性元素在垂直轴上分布方式:</h1>
<h3>1. stretch: 默认值, 元素高度自动拉伸充满整个容器</h3>
<p>单行容器:</p>
<div class="rongqi flex stretch">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>


<p>多行行容器:</p>
<div class="rongqi flex wrap wrap-stretch">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>
<h3>2. flex-start, 元素紧贴容器起点</h3>
<p>单行容器:</p>
<div class="rongqi flex flex-start">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>3. flex-end, 元素紧贴容器终点</h3>
<p>单行容器:</p>
<div class="rongqi flex flex-end">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>4. center, 元素紧贴容器中间,居中显示</h3>
<p>单行容器:</p>
<div class="rongqi flex center">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>5. space-between,垂直方向首尾行紧贴起止点,其它平分剩余空间 </h3>
<p>单行容器:</p>
<div class="rongqi flex wrap space-between">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
</div>
<h3>6. space-around,每个元素以及元素起点到终点空间全部相等 </h3>
<p>单行容器:</p>
<div class="rongqi flex wrap space-around">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
</div>
<h3>7. space-evenly,每个元素,以及元素到起止点空间全部相等 </h3>
<p>单行容器:</p>
<div class="rongqi flex wrap space-evenly">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
</div>
<h3>8. 实现全部元素空间相等 </h3>
<p>单行容器:</p>
<div class="rongqi flex wrap all-center">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
</div>
</body>
</html>

运行实例 »

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

运行结果图: