<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width: 400px;height: 400px;

            border: 1px solid red;

            /* 先把父元素设置成flex(伸缩) */

            display: flex;

            /* 子元素在主轴方向的对其方式的设置 */

            /* justify-content: flex-end; */  /*从右到左 ，默认显示从左到右 */

            /* justify-content: center; *//* 中间显示*/

            /* justify-content: space-between */ /*两端对齐*/

            /* justify-content: space-around  */ /*两边空白 环绕式对齐*/

            /* 主轴方向作为调整 */

            /* flex-direction: row; */ /*主轴水平*/

            /* flex-direction: row-reverse; */ /*水平反转*/

            /* flex-direction: column;  *//*主轴水平方向变成了垂直的方向，侧轴永远是垂直主轴的*/

             /* flex-direction: column-reverse; */ /*主轴竖着反转*/

         /* 侧轴对齐 */

         /* align-items: flex-start;  */ /*侧轴开始*/

          /* align-items: flex-end;  */ /*侧轴底部*/

           /* align-items: center;  */ /*侧轴居中*/

            /* align-items: stretch;  */ /*拉伸效果，要想有效果，必须干掉子元素的高度*/

            /* 默认子元素没有换行 nowrap*/

            flex-wrap: wrap;   /*子元素换行*/

           /* flex-wrap: wrap-reverse; */ /*反转加换行*/

           align-content: flex-start /*子元素换行后有空白行，希望没有空白行，需要重新设置主轴的方向*/

        }

        .dv1{

            width: 100px;height: 100px;

            background: red;

            margin-left: 5px;

        }

        .dv2{

            width: 100px;height: 100px;

            background: blue;

            margin-left: 5px;

        }

        .dv3{

            width: 100px;height: 100px;

            background: green;

            margin-left: 5px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="dv1"></div>

        <div class="dv2"></div>

        <div class="dv3"></div>

        <div class="dv3"></div>

        <div class="dv4"></div>

        <div class="dv1"></div>

    </div>

</body>

</html>

css3 伸缩布局 display:flex等的更多相关文章

  1. CSS3：布局display属性的flex（弹性布局）

    CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...

  2. 前端CSS3布局display:flex用法

    前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...

  3. CSS3 伸缩布局盒模型记

    CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...

  4. css3伸缩布局中justify-content详解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

  6. css3弹性伸缩布局(一)—————flex布局

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解 ...

  7. CSS3伸缩布局Flex学习笔记

    如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些 ...

  8. CSS3 伸缩布局盒模型

    CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间.更重要的 ...

  9. CSS3——伸缩布局及应用

    CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用. 主轴:Flex容器的主轴主要用来配置Flex项目,默认是水 ...

随机推荐

  1. centos7磁盘挂载及取消

    磁盘挂载查看已经挂载磁盘数 cat /proc/scsi/scsi | grep HostHost: scsi1 Channel: 00 Id: 00 Lun: 00Host: scsi2 Chann ...

  2. centos 环境搭建jenkins服务

    1.下载jenkins war包 https://jenkins.io/download/ 选择Generic Java package (.war)下载2.下载apache tomcat 8 htt ...

  3. 使用 fail2ban 防御 SSH 服务器的暴力破解攻击

    对于SSH服务的常见的攻击就是暴力破解攻击——远程攻击者通过不同的密码来无限次地进行登录尝试.当然SSH可以设置使用非密码验证验证方式来对抗这种攻击,例如公钥验证或者双重验证.将不同的验证方法的优劣处 ...

  4. python--第八天总结

    一.isinstance(obj, cls) 检查是否obj是否是类 cls 的对象 class Foo(object): pass obj = Foo() isinstance(obj, Foo) ...

  5. atitit 读书与获取知识资料的attilax的总结.docx

    atitit 读书与获取知识资料的attilax的总结.docx 1.1. 读书即是获取知识,获取资料,获取信息的一种方式 2 2. 获取资料信息的目的,有什么作用,有什么用途?? 2 2.1. 扩大 ...

  6. sudo: unable to execute ./script.sh: no such file or directory

    I just had this exact problem, it turned out to be a text file encoding problem. For me to fix it wh ...

  7. 看雪CTF第十题

    __int64 sub_140006F50() { __int64 v0; // r8@1 __int64 v1; // r9@1 signed __int64 len; // rax@1 __int ...

  8. Python中的三元运算符

    Python中的三元运算符 对于如下需求: if var1>1 : goal = "执行表达式1" else: goal = "执行表达式2" 1.在其他 ...

  9. Specified version of key is not available (44)

    -- ::, ERROR [HiveServer2-Handler-Pool: Thread-]: transport.TSaslTransport (TSaslTransport.java:open ...

  10. modelsim如何使用tcl脚本来写编译文件

    对于modelsim进行仿真,可以通过GUI来进行仿真,当然更加快速的方法可以使用TCL脚本文件进行快速仿真. Modelsim采用TCL脚本文件仿真的具体流程如下所示:      具体的操作步骤如下 ...