！声明文档类型

html lang='en '

头

meta charset='UTF-8 '

titleflex布局/title

风格

* { margin : 0；padd : 0；}

html，body { height : ；相对位置：}。包装材料{高： 100px线高： 100 px文本-对齐：中心；宽度： 30%;余量： 0自动}。box-flex { background : # F4 F4；padding: 10pxborder: 1px虚线钢蓝色；}。box-flex span { display : }块；border: 1px固体红色；}。box-WP H2 { text-align : left；}。box-WP H2 span { font-weight : normal；font-size : 18px}。box-flex { display :-ms-flex；显示器：-moz-flex；display :-web kit-flex；display:flex}。项目{ margin-bottom : 10px；}

页脚{位置：固定；right : 10pxbottom : 10pxcolor : # DDD text-align : right；}

/* 小屏下变成纵向排列元素*/

@media (max-width: 768px) {。box-flex { flex-direction : }列；}

}

/* flex两列布局*/。box-flex1{}。box-flex 1。项目： th-child(1){ flex-grow : 2；}。box-flex 1。项目： th-child(2){ flex-grow : 1；}

/* flex两列布局（一列定宽，另一列随屏幕宽度自适应) */。box-flex2{}。box-flex2 .项目{}。box-flex 2。项目：n th-child(1){ flex : 1 0 100 px；}/* 元素不收缩*/。box-flex 2。项目： th-child(2){ flex-grow : 1；隐藏飞越：}/* 防止元素内容过长超出父元素*/

/* flex三列布局*/。box-flex3{}。box-flex 3。项目： th-child(1){ flex-grow : 2；订单： 1；}。box-flex 3。项目： th-child(2){ flex-grow : 1；订单： 0；}。box-flex 3。项目： th-child(3){ flex-grow : 1；订单： 2；}

/* flex n列等比布局*/。box-flex4{}。box-flex4 .项目{宽度： ；flex-grow : 1；断字：断字；}/* 设置宽度可避免项目里内容过多时。该元素相对其他兄弟元素变宽*/

/* flex流式布局*/。box-flex 5 { flex-wrap : wrap；正义-内容： flex-start；}。box-flex5 .项目{ flex-basis 3360 32%；}

/* flex水平垂直居中*/。box-flex 6 { width :300 px；height :300 pxjustice-content center :对齐-项目：居中；}。box-flex6 .项目{ flex-basis 3360 33%；}

/* flex对折线*/。box-flex 7 { flex-direction : }列；宽度： 300px}。box-flex7 .项目-WP { display : flex；}。box-flex7 .项目-WP : th-child(1){ }。box-flex7 .项目-WP : th-child(2){狡辩-内容中心：对齐-项目：居中；}。box-flex7 .项目-WP :第n个子项目(3){狡辩-content : flex-end；align-items : flex-end；}。box-flex7 .项目{ flex-basis 3360 33%；}

/* flex各种对齐方式*/。box-flex 8 { flex-direction : }列；}。box-flex8 .项目-WP { display : flex；}。box-flex8 .项目-WP :第n个子项目(1){狡辩-内容： space-round；}。box-flex8 .项目-WP :第n个子项目(2){狡辩-内容：空格；}。box-flex8 .项目-WP :第n个子项目(3){狡辩-content : flex-start；}。box-flex8 .项目-WP : th-child(4){狡辩-内容中心：}。box-flex8 .项目-WP :第n个子项目(5){狡辩-content : flex-end；}。box-flex8 .项目{ flex-basis 3360 25%；}

/style

/head

身体

div class='wrapper '

h1flex布局/h1

div class='box-wp '

h2flex两列布局/h2

div class='box-flex box-flex1 '

span class='item item1'1/span

span class='item item2'2/span

/div

h2flex两列布局跨度（一列定宽，另一列随屏幕宽度自适应)/span/h2

div class='box-flex box-flex2 '

span class='item item1'1/span

span class=' item item 2 ' 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222/span

/div

h2flex三列布局/h2

div class='box-flex box-flex3 '

span class='item item1'1/span

span class='item item2'2/span

span class=' item 3 ' 3/span

/div

h2flexnbsp .n列等比布局/h2

div class='box-flex box-flex4 '

span class='item item1'1/span

span class='item item2'2/span

span class=' item 3 ' 3/span

span class=' item 4 ' 4/span

span class='item item5'5/span

span class=' item 6 ' 66666666666666/span

/div

h2flex流式布局/h2

div class='box-flex box-flex5 '

span class='item item1'1/span

span class='item item2'2/span

span class=' item 3 ' 3/span

span class=' item 4 ' 4/span

span class='item item5'5/span

span class=' item 6 ' 6/span

span class=' item 7 ' 7/span

/div

h2flex水平垂直居中/h2

div class='box-flex box-flex6 '

span class='item item1'1/span

/div

h2flexnbsp .对折线/h2

div class='box-flex box-flex7 '

div class=' item-WP ' span class=' item item 1 ' 1/span/div

div class=' item-WP ' span class=' item item 2 ' 2/span/div

div class=' item-WP ' span class=' item item 3 ' 3/span/div

/div

h2flex各种对齐方式/h2

div class='box-flex box-flex8 '

div class=' item-WP ' span class=' item 1 ' 1/span span class=' item 2 ' 2/span span class=' item 3 ' 3/span/div

div class=' item-WP ' span class=' item 4 ' 4/span span class=' item 5 ' 5/span span class=' item 6 ' 6/span/div

span class=' item-WP ' span class=' item 7 ' 7/span span class=' item 8 ' 8/span/div

div class=' item-WP ' span class=' item item 9 ' 9/span span class=' item item 10 ' 10/span/div

div class=' item-WP ' span class=' item item 11 ' 11/span span class=' item item 5 ' 12/span/div

/div

/div

/div

页脚

p由Hershin撰写/p

/页脚

/body

/html