flex属性值----弹性盒子布局

里面的属性都 是在有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(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;*/
      /*}*/
    </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>

 

一

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

二

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

三

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

posted @ 2016-11-23 15:09  ypm_wbg  阅读(802)  评论(0)  编辑  收藏  举报