css3 布局方式

flex布局

display:flex 布局方式转换成弹性布局 (啥 ? 什么是弹性布局 ? 谁知道啊 ~~ )

.example {    display: -webkit-flex;  /*Safari*/      display: flex; /*弹性布局*/}

---

flex-direction 规定flex布局主轴(x轴)的方向

.example {    display: flex;    flex-direction: row; /*default 横向显示*/    flex-direction: column; /* 纵向显示, 设置此属性会将子元素中的行内元素变为块级元素 */    flex-direction: row-reverse; /*作用相同 方向相反*/    flex-direction: column-reverse; /*作用相同 方向相反*/    /****** Global values ******/    flex-direction: inherit;  /*继承*/    flex-direction: initial;  /*默认值*/    flex-direction: unset;    /*撤销*/}

---

flex-wrap 属性指定flex元素单行显示和多行显示

.example {    display: flex;    flex-wrap: nowrap; /*单行显示 */    flex-wrap: wrap;    /*多行显示 */    flex-wrap: wrap-reverse; /*多行显示 反转方向 */}

---

justify-content 属性定义如何分配父容器主轴方向(x轴)中弹性元素的空间布局

.example {    display: flex;  /*转换为弹性布局*/    justify-content: space-between;  /*两端对齐*/ /*首个元素放置于起点  末尾元素放置于终点 其他元素均匀排列*/    justify-content: center; /*居中对齐*/    justify-content: space-around;  /*均分空间 每个元素占相同空间*/    justify-content: flex-start; /* default  从行首起始位置开始排列*/    justify-content: flex-end; /* 从行尾位置开始排列 */    /* Global values */    justify-content: inherit;    justify-content: initial;    justify-content: unset;}

---

align-items 属性定义父容器侧轴(y轴)方向中弹性元素的位置

.example {    display: flex;    align-items: center; /*垂直居中*/    align-items: flex-start; /*起点对齐*/    align-items: flex-end; /*尾部对齐*/    align-items: baseline; /*基线对齐*/    align-items: stretch; /* defalut 将子元素拉伸至与父容器同样高度*/}

---

align-self aligin-items给父元素设置 align-self给子元素设置

.example{    display: flex;    .child{        align-self: center; /*垂直居中*/        // . . . .         // 如果父元素设置了align-items 则会覆盖    }}

---

规定该子元素在所有子元素中所占比重,定义弹性盒子项（flex item）的拉伸因子

.example {    flex-grow: 1;    flex-grow: 2;    flex-grow: 3;    /****** Global values ******/    flex-grow: inherit}

---

一些必要的属性

规定盒模型 边框和padding包含在宽高内部

* {    -webkit-box-sizing: border-box;    box-sizing: border-box;}

---

IOS 端滑动视图不平滑解决办法

.example {    -webkit-overflow-scrolling : touch;}

---

未完待续