<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0
}
ul,li{list-style-type:none;} .box {
width: 660px;
background-color: #ddd;
margin: 0 auto;
padding: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap; /*换行*/
justify-content: space-between; /*左右对齐*/
} .box li {
width: 200px;
margin-bottom: 20px;
} .box li a {
display: block;
height: 300px;
backgrounday: block;
height: 300px;
background-color: aquamarine;
border: 1px solid red;
}
</style>
</head> <body>
<ul class="box">
<li><a href="javascript:;">格子</a></li>
<li><a href="javascript:;">格子</a></li>
<li><a href="javascript:;">格子</a></li>
<li><a href="javascript:;">格子</a></li>
<li><a href="javascript:;">格子</a></li>
<li><a href="javascript:;">格子</a></li>
<li><a href="javascript:;">格子</a></li>
<li><a href="javascript:;">格子</a></li>
</ul> </body> </html>

效果图:

弹性盒子模型display:flex(2)的更多相关文章

  1. 弹性盒子模型display:flex

    1.div上下左右居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. 弹性盒模型display:flex

    Flex布局意为"弹性布局",用来为盒模型提供更多灵活性.此外,Flex定义的容器可以对块级元素(display: flex;)或行内元素(display: inline-flex ...

  3. Flexible 弹性盒子模型之flex

    实例 让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容: #main div { flex:1; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟 ...

  4. 弹性盒子模型属性之flex-grow

    在学习弹性盒子模型的时候,有几个属性常常让同学们感觉头痛, 不知到最后得到的效果数值到底是怎样计算得来的,那么不要慌,稳住,我们能赢 !!!今天就让我们先来看看flex-grow这个属性 flex-g ...

  5. 弹性盒模型,flex布局

    弹性盒模型   弹性盒子是css3的一种新布局模式,由容器(父元素)和项目(子元素)组成. 弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 引入弹性盒模型的 ...

  6. css3弹性盒子模型

    当下各种手机,平板尺寸不一,如果盒模型只能固定尺寸,不能随意压缩,将不能很好的迎合这个时代.所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model). 弹性盒模型可以水平布 ...

  7. css中的f弹性盒子模型的应用案例

    案例1: <!doctype html> <html> <head> <meta charset="utf-8"> <meta ...

  8. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  9. CSS box-flex属性,然后弹性盒子模型简介

    今天做项目的时候发现一个css3的新属性flex 一.什么是flex 它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距.甚至是在容器的大小发生改变的时候,都可以重新 ...

随机推荐

  1. php遍历所有文件

    <?php function getdir($dir){ static $str = ''; if(is_file($dir)){ $str.=$dir.'<br>'; }else{ ...

  2. update svn cache 慢

    eclipse 打开了一个工程,就进行了update svn cache,弄了2个多小时了还是在进行.观察这个过程在空文件夹上也进行了不少时间,我感觉到可能方法错了.试了下关闭SVN--> sv ...

  3. 对List集合进行排序

    一.说明 使用Collections工具类的sort方法对list进行排序 新建比较器Comparator 二.代码 排序: import java.util.ArrayList; import ja ...

  4. 寄存器CPU存储地址信息和数据信息的地方 CPU通过地址寄存器区分指令和数据

  5. shell如何传递变量到另一个脚本文件中

    http://www.jbxue.com/article/shell/20707.html本文介绍了shell脚本传递变量到另一个脚本文件中的方法,在脚本中调用另一脚本,即创建了一个子进程,感兴趣的朋 ...

  6. ROS Navigation中的map_server地图包功能和使用

    博客参考 http://wiki.ros.org/map_server 和 https://www.ncnynl.com/archives/201708/1897.html 1. 安装map_serv ...

  7. Linux主流发行版本

    一.简介 而工欲善其事,必先利其器,Linux的世界相當廣大,除了最著名的Ubuntu以外還有不少發行版.然文人相輕,自古皆然,了解不同發行版的優勢不只嘴上攻防用的上,也是學Linux一個有趣的地方! ...

  8. eclipse中maven install提示编码GBK的不可映射字符

    今天在eclipse中使用Maven编译项目源代码时,结果如下了如下的错误 在Java源码中没有提示任何报错,即便是改掉项目编码也是不行,如下图所示:

  9. windows环境下配置tornado

    1.前言        在网上看过一些在windows下配置tornado的教程,有一些写的十分复杂,让人望而生却.然后我就自己试着在windows下面配置tornado.我发现,方法非常简单,短短几 ...

  10. C/C++编程可用的Linux自带工具

    GNU Binary Utilities或binutils是一整套的编程语言工具程序,用来处理许多格式的目标文件.当前的版本原本由在Cygnus Solutions的程序员以Binary File D ...