<!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. 【转载】Linux下查看CPU、内存占用率

    不错的文章(linux系统性能监控--CPU利用率):https://blog.csdn.net/ctthuangcheng/article/details/52795477 在linux的系统维护中 ...

  2. web字体分析

    一.衬线字体与非衬线字体 衬线体(serif)和无衬线体(sans-serif)的分类起源于英文字体界. 衬线体(serif)-Georgia-Times 「衬线」指的是字形笔画在首位的装饰和笔画的粗 ...

  3. C# 反射获取控件

    Control control = Controls.Find(]; //object o = control.GetType().GetProperty("PropertyName&quo ...

  4. Windows 10下安装配置Caffe并支持GPU加速(修改版)

    基本环境 建议严格按照版本来 - Windows 10 - Visual Studio 2013 - Matlab R2016b - Anaconda - CUDA 8.0.44 - cuDNN v4 ...

  5. opencv wlsfilter depth refinement demo

    参考 https://docs.opencv.org/3.2.0/d3/d14/tutorial_ximgproc_disparity_filtering.html // This file is p ...

  6. eclipse的debug模式下启动不了tomcat

    使用eclipse启动tomcat,正常模式下可以启动tomcat,却在debug模式下无法启动tomcat. 这个问题可能是由于eclipse和tomcat的交互而产生的,在以debug模式启动to ...

  7. centos系统安装rar解压工具unar

    centOS上不支持rar解压,需要额外安装软件,收费版是unrar,免费版是unar unar在centOS上安装需要源码编译,下面是安装方法: 1.安装依赖 yum install gnustep ...

  8. eclipse 查看变量或方法在什么地方被调用的快捷键和快速显示方法入参提示信息

    为了用eclipse写代码的时候,不用方向键移动光标,可以设置如下快捷键, Line Up:Alt+i   光标向上 Line Down:Alt+k 光标向下 Line Start:Alt+u  移到 ...

  9. npm太慢， 修改npm镜像

    今天晚上想要将clone下来的项目进行npm install,但是等了半天都没动 查看源 npm config get registry 或 npm config list https://regis ...

  10. 转载：sigmoid和softmax总结

    转自:http://blog.csdn.net/u014422406/article/details/52805924 sigmoid函数(也叫逻辑斯谛函数): 引用wiki百科的定义: A logi ...