小伙伴们，我们学习了伸缩容器的一些属性，接下来使用我们所学的伸缩容器属性完成下面的效果图。

完成效果：

任务

1、先将容器设置为伸缩容器

2、在垂直方向上对齐，行与行之间的空白距离一样

3、在水平方向上对齐，第一个和最后一个项目位于容器的最左边和最右边

<!DOCTYPE html>

<html>

<head lang="zh-CN">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style: none;

            background-color: orange;

            height: 150px;

            width: 390px;

            margin: 20px auto;

            /* 此处补充代码 */

        }

    </style>

</head>

<body>

    <ul>

        <li>第一个li</li>

        <li>第二个li</li>

        <li>第三个li</li>

        <li>第四个li</li>

        <li>第五个li</li>

        <li>第六个li</li>

    </ul>

</body>

</html>

参考代码：

<!DOCTYPE html>

<html>

<head lang="zh-CN">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style: none;

            background-color: orange;

            height: 150px;

            width: 390px;

            margin: 20px auto;

            /* 此处补充代码 */

            display: flex;

            flex-direction: row;

            justify-content: space-between;

            flex-wrap: wrap;

            align-content: space-around;

        }

        li {

            font-size: 24px;

            width: 100px;

            background-color: pink;

        }

    </style>

</head>

<body>

    <ul>

        <li>第一个li</li>

        <li>第二个li</li>

        <li>第三个li</li>

        <li>第四个li</li>

        <li>第五个li</li>

        <li>第六个li</li>

    </ul>

</body>

</html>

慕课网3-10编程练习：简单的flex布局的更多相关文章

  1. 慕课网 javascript深入浅出编程练习

    任务 请在index.html文件中,编写arraysSimilar函数,实现判断传入的两个数组是否相似.具体需求: 1. 数组中的成员类型相同,顺序可以不同.例如[1, true] 与 [false ...

  2. 慕课网：剑指Java面试-Offer直通车视频课程

    慕课网:剑指Java面试-Offer直通车视频课程,一共有10个章节. 目录结构如下: 目录:/2020036-慕课网:剑指Java面试-Offer直通车 [6G] ┣━━第10章 Java常用类库与 ...

  3. 10慕课网《进击Node.js基础（一）》初识promise

    首先用最简单的方式实现一个动画效果 <!doctype> <html> <head> <title>Promise animation</titl ...

  4. java网络爬虫----------简单抓取慕课网首页数据

    © 版权声明:本文为博主原创文章,转载请注明出处 一.分析 1.目标:抓取慕课网首页推荐课程的名称和描述信息 2.分析:浏览器F12分析得到,推荐课程的名称都放在class="course- ...

  5. 【JS学习】慕课网8-17编程练习 网页的返回与跳转

    编程练习 制作一个跳转提示页面: 要求: 1. 如果打开该页面后,如果不做任何操作则5秒后自动跳转到一个新的地址,如慕课网主页. 2. 如果点击“返回”按钮则返回前一个页面. 代码如下: 需要注意的是 ...

  6. 慕课网5-2编程练习：flex布局制作卡片布局案例

    慕课网5-2编程练习:flex布局制作卡片布局案例 小伙伴们,学习了卡片布局,接下来我们根据效果图,也写出一个卡片布局的页面吧! 效果图如下: 任务 1.主体内容的卡片一行只能显示两个. 2.卡片与卡 ...

  7. 慕课网4-2 编程练习：jQuery祖先后代选择器小案例

    4-2 编程练习 结合所学的祖先后代选择器,实现如下图所示效果 任务 (1)使用祖先后代选择器将第二段文字背景色变成红色 (2)使用jQuery的.css()方法设置样式,语法css('属性 '属性值 ...

  8. 慕课网3-13编程练习：采用flex弹性布局制作页面主导航

    小伙伴们,伸缩容器的属性我们已经学完了,接下来使用我们所学的伸缩容器属性完成下面的效果图. 要求: 1.logo.导航项.登录注册按钮这三项在水平和垂直方向上都对齐,而且他们之间的距离也相等. 2.导 ...

  9. JavaScript进阶--慕课网学习笔记

                         JAVASCRIPT—进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字 ...

随机推荐

  1. 「 Luogu P1850 」 换教室

    解题思路 很明显的是个期望 $dp$. 先前想到 $dp[i][j]$ 表示第决策到第 $i$ 个时间段,已经进行了 $j$ 次申请,然后就没有然后了,因为这根本就没法转移啊,你又不知道前 $i-1$ ...

  2. Spring Boot之简单的MVC

    最近开始看Spring Boot,发现其开发起来真是方便.今天就来实现一个简单的Spring MVC 请求,纯Java代码的哦. 1.Maven必不可少,先看看都加载了那些依赖: <?xml v ...

  3. 每日命令：（6）rmdir

    今天学习一下linux中命令: rmdir命令.rmdir是常用的命令,该命令的功能是删除空目录,一个目录被删除之前必须是空的.(注意,rm - r dir命令可代替rmdir,但是有很大危险性.)删 ...

  4. 超星toPDF

    * ssReader to pdf   Note: editor: Emacs-org   1. download and open the book with sspreader 2. click ...

  5. Postman用法简介----https://blog.csdn.net/flowerspring/article/details/52774399

    https://blog.csdn.net/flowerspring/article/details/52774399 Postman用法简介

  6. Why does MySQL produce so many temporary MYD files?

    http://dba.stackexchange.com/questions/30505/why-does-mysql-produce-so-many-temporary-myd-files Data ...

  7. [luoguP3690] 【模板】Link Cut Tree

    传送门 处理路径 xor 和的时候可以维护子树 xor 和,先提取出路径,再把一个点 splay 到最上方,直接取子树 xor 和即可. 更新一个点权时可以先提取出根到这个点的路径,把这个点 spla ...

  8. 【BZOJ2081】Beads（哈希表）

    题意: 翻转是指其中一段长度为k的子串全部翻转 n<=200000 a[i]<=n 思路:枚举k,直接哈希判充即可 时间复杂度是n/i求和,根据定理可得是O(n log n)级别的 单哈双 ...

  9. 自己修改的vim配色选择器的颜色显示部分

    话不多说,上代码如下: " ___ __) ) ___ ______) " (, |/ (__/_____) /) (, / /) /) " | _/_ _ __ ___ ...

  10. 【python】蛋疼的中文乱码解决方案

    转自: http://yooooo.us/2013/python-encoding-decoding?variant=zh-cn