里面的属性都 是在有display: flex的情况 下才生效。

兼容性写法：   display: -webkit-box; /*老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

　　　　　　　display: -moz-box; /* 老版本语法: Firefox (buggy) */

　　　　　　　display: -ms-flexbox; /* 混合版本语法: IE 10 */

　　　　　　　display: -webkit-flex; /* 新版本语法: Chrome 21+ */

　　　　　　　display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */

display : flex  弹性盒子 给元素加这一属性，它的子元素将进行弹性布局，其子元素会以横向（默认）方式布局；

flex-direction: 属性是指定多个元素的排列方向： row(横向排列，默认) ,row-reserse（横向反向排列）,column（纵向排列）,column-reserse（纵向反向排列）；

justify-content(在水平方向上)：在使用fle值时，可以使用这个属性，flex-start(从前面开始布局所有子元素)，flex-start(元素整体向右移，直到最后的元素到父元素的右边框 ),center(居中布局所有子元素)，space-between（ 将第一个子元素放在最前面，最后一个元素放在最后面，将空白部分平均分配在所有子元素与元素之间），spase-around (将空白部分平均分配在开头、结尾、以及各元素之间)。

align-content（垂直方向上）：center（居中布局所有元素），其它还有很多属性，可以去了解。

常用套路：justify-content：center（使里面元素水平居中）;align-content: center(使里面元素垂直居中)。一起用可以水平垂直居中。　　　　　　　　

其子元素属性：

flex: 取值为数字，表示这个可自动填满多余空间。flex:1（基本都是取1）;

order: 表示元素排列顺序.order:1,order:2;1排在2的前面，注意: 没有设order值的元素排在最前面；

flex-wrap： 控件换行方式 ，nowrap (不换行)，wrap(换行)，wrap-reserve(虽然换行最方向与wrap时方向向反)。

align- items是写在父元素上，，控制所有的子元素对齐方式，align-self是写在子元素上控制单个元素的对齐方式 。

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div.flex1{

            flex-direction:flex;

            height: 300px;

            width: 600px;

        }

        .flex1>div:nth-child(){

            /*width:100px;*/

            padding:20px;

            margin:10px;

            /*order:2;*/

            background: blue;

        }

        .flex1>div:nth-child(){

            flex:;

            padding:20px;

            /*order:1;*/

            background: red;

        }

        .flex1>div:nth-child(){

            /*width:100px;*/

            /*flex:1;*/

            margin:10px;

            padding: 20px;

            border:1px solid green;

            background: #eee;

        }

      /*.flex1>div{*/

          /*box-sizing: border-box;*/

      /*}*/

    </style>

</head>

<body>

<div class="flex1">

    <div >

        <h2>一</h2>

        <p>sdafggg地方萨芬大法师短发 模压暗示的发生模压暗示</p>

    </div>

    <div>

        <h2>二</h2>

        <p>sdfasdf靺大法师地方萨芬大法师短发 模压暗示的发生模压暗示的发地左塔顶房间爱视频地方就是偏低回复你撒泼法案房</p>

    </div>

    <div>

        <h2>三</h2>

        <p>dsfaa地方萨芬大法师短发 模压暗示的发生模压暗示</p>

    </div>

</div>

</body>

</html>

div:nth-child(1){
width:100px;
padding:20px;
margin:10px;
/*order:2;*/
background: blue;
}
.flex1>div:nth-child(2){
flex:1;
padding:20px;
/*order:1;*/
background: red;
}
.flex1>div:nth-child(3){
width:100px;
/*flex:1;*/
margin:10px;
padding: 20px;
border:1px solid green;
background: #eee;
}
/*.flex1>div{*/
/*box-sizing: border-box;*/
/*}*/
-->

一

sdafggg地方萨芬大法师短发 模压暗示的发生模压暗示

二

sdfasdf靺大法师地方萨芬大法师短发 模压暗示的发生模压暗示的发地左塔顶房间爱视频地方就是偏低回复你撒泼法案房

三

dsfaa地方萨芬大法师短发 模压暗示的发生模压暗示

flex属性值----弹性盒子布局的更多相关文章

  1. CSS3总结五：弹性盒子(flex)、弹性盒子布局

    弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...

  2. css横向 弹性盒子布局的一些属性

    <head> <meta charset="utf-8"> <meta name="viewport" content=" ...

  3. CSS3 Flex Box（弹性盒子）

    CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...

  4. CSS：CSS弹性盒子布局 Flexible Box

    一.简介 flexbox:全称Flexible Box, 弹性盒子布局.可以简单实现各种伸缩性的设计,它是由伸缩容器和伸缩项目组成.任何一个元素都可以指定为flexbox布局.这种新的布局方案在200 ...

  5. flex弹性盒子布局

    一.在需要使用弹性盒子的容器上添加属性:display:flex 或者 display:inline-flex; 二.在父容器上添加flex-direction设置子元素主轴方向: 不写默认值是X轴从 ...

  6. css3 flex弹性盒子布局梳理，打通任督二脉

    挺早就接触了css的flex布局,深入使用也就是在近期移动端开发.老来多健忘,只能自己梳理一下知识点,当做温故知新吧. ,请原谅小白的才疏学浅,写的不到位的地方请指正. flex属性用于设置或检索弹性 ...

  7. 弹性盒子布局flexbox

    弹性盒子display:flexbox一般应用于父元素的容器上,然后对子元素来进行弹性布局 设置了flexbox的父元素不能设置具体的宽度与高度的值,而是通过子元素来设置值,父元素弹性的包裹既可 相关 ...

  8. 弹性盒子布局（display:flex）知识点

    设为 Flex 布局以后,子元素的float.clear和vertical-align属性将失效.

  9. Flex box 弹性盒子布局

    display: -webkit-flex 标识使用弹性布局 flex: num  占容器的比例   Flex等比划分 导航1 : Flex :1;  导航2  Flex: 2;     ————&g ...

随机推荐

  1. TOGAF企业连续体和工具之架构资源库及架构工具的选择

    TOGAF企业连续体和工具之架构资源库及架构工具的选择 3. 架构资源库 在一个企业,尤其是在一个大型企业中,建设一个成熟的架构往往会产生大量的工作产品.为了很好地管理和利用这些工作产品,企业需要制定 ...

  2. JavaScript原生对象拓展

    JavaScript原生对象拓展 在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏 ...

  3. nosql和关系型数据库比较？

    nosql和关系型数据库比较? 优点: 1)成本:nosql数据库简单易部署,基本都是开源软件,不需要像使用oracle那样花费大量成本购买使用,相比关系型数据库价格便宜 2)查询速度:nosql数据 ...

  4. 整合MVVM框架(Prism)

    整合MVVM框架(Prism) 我们基础的框架已经搭建起来了,现在整合MVVM框架Prism,在ViewModel做一些逻辑处理,真正把界面设计分离出来. 这样方便我们系统开发分工合作,同时提高系统可 ...

  5. 对Conjugate Gradient 优化的简单理解

    对Conjugate Gradient 优化的简单理解) 机器学习&数据挖掘笔记_12(对Conjugate Gradient 优化的简单理解) 数学优化方法在机器学习算法中至关重要,本篇博客 ...

  6. SVN中Branch的创建于合并

    SVN中Branch的创建于合并 在使用源代码版本控制工具时,最佳实践是一直保持一个主干版本.但是为了应付实际开发中的各种情况,适时的开辟一些分支也是很有必要的.比如在持续开发新功能的同时,需要发布一 ...

  7. java调用计算机显示文档

    import java.awt.Desktop; import java.io.File; import java.io.IOException; /** * Java调用系统默认程序打开本地文件 * ...

  8. Jenkins+PMD构建自动化静态代码检测

    前言:软件缺陷是不可避免的,要尽量减少错误并提高软件质量,主要有两在类技术,即缺陷预防和缺陷检测 缺陷预防包括编写更好的设计规范.实施代码审核制度.运行代码静态分析工具.运行单元测试等 PMD是一种开 ...

  9. Linux：备份

    一.每日备份数据 该脚本backupday.sh用来每日备份你需要备份的文件或目录 使用办法 1)打开脚本修改要备份的目录或文件和备份到的目录(如从A备份到B) 2)修改后运行脚本 需要备份数据时,直 ...

  10. HTML <textarea> 标签的 wrap 属性

    HTML <textarea> 标签的 wrap 属性 wrap 属性 通常情况下,当用户在输入文本区域中键入文本后,浏览器会将它们按照键入时的状态发送给服务器.只有用户按下 Enter ...