css3 伸缩布局 display:flex等

<!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等的更多相关文章

CSS3：布局display属性的flex（弹性布局）
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
前端CSS3布局display:flex用法
前端CSS3布局display:flex用法先附上代码点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...
CSS3 伸缩布局盒模型记
CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...
css3伸缩布局中justify-content详解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
CSS弹性盒布局(display:flex)
CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...
css3弹性伸缩布局(一)—————flex布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解 ...
CSS3伸缩布局Flex学习笔记
如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些 ...
CSS3 伸缩布局盒模型
CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间.更重要的 ...
CSS3——伸缩布局及应用
CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用. 主轴:Flex容器的主轴主要用来配置Flex项目,默认是水 ...

随机推荐

[转]正则表达式的先行断言(lookahead)和后行断言(lookbehind)
正则表达式的先行断言和后行断言一共有4种形式: (?=pattern) 零宽正向先行断言(zero-width positive lookahead assertion) (?!pattern) 零宽 ...
node出现 Error: listen EACCES 0.0.0.0:8080错误
Error: listen EACCES 0.0.0.0:8080 at Object._errnoException (util.js:1022:11) at _exceptionWithHostP ...
【iCore4 双核心板_ARM】例程三十五：HTTP_IAP_ARM实验——更新升级STM32
实验现象: 核心代码: int main(void) { led.initialize(); //LED³õÊ¼»¯ key.initialize(); if(ARM_KEY_STATE == KEY ...
【iCore4 双核心板_ARM】例程二十四：LWIP_DHCP实验——动态分配IP地址
实验现象: 核心代码: int main(void) { system_clock.initialize(); led.initialize(); adc.initialize(); delay.in ...
SparkStreaming：关于checkpoint的弊端
当使用sparkstreaming处理流式数据的时候,它的数据源搭档大部分都是Kafka,尤其是在互联网公司颇为常见. 当他们集成的时候我们需要重点考虑就是如果程序发生故障,或者升级重启,或者集群宕机 ...
pip 安装出现超时问题的解决
pip 安装出现超时问题的解决我们在用默认的pip源进行安装python库时,会出现超时问题下载不了,如下图显示所示: 那么我们应该如何解决呢? 方法: 在自己电脑的 C:\Users\yanji ...
hdoj：2085
核反应堆 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
Python学习笔记——发邮件
参考:Python3实现163邮箱SMTP发送邮件 1.首先需要注册一个网易的邮箱,开启smtp服务,并使用其授权码 2.发送邮件的Python脚本 #!/usr/bin/python # -*- c ...
layui动态数据表格-分页
数据结构 $list = [ [,'], [,] ]; $json[; $json['; $json[; $json['data'] = $list; return json($json); 代码: ...
Tomcat以Daemon的方式启动（CentOS6&7）
1 前言一直以来都觉得Tomcat以root身份运行非常不安全,故研究Tomcat如何以普通用户身份运行,以下是参考网络上的一些配置实现Tomcat以daemon方式运行于CentOS 6& ...

css3 伸缩布局 display:flex等

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

随机推荐

热门专题