html flex 的高度,flex布局高度

图是正方形的，外面的item也想是正方形，但是不知道问什么就高出很多

PageSlider Demo

html,

body {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

overflow: hidden;

}

.pages {

width: 100%;

height: 100%;

position: relative;

}

.page {

font-size: 100px;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

overflow: hidden;

transform: translate3d(0px, 100%, 0px);

-webkit-transform: translate3d(0px, 100%, 0px);

-moz-transform: translate3d(0px, 100%, 0px);

transition: transform .5s ease-out;

-webkit-transition: -webkit-transform .5s ease-out;

-moz-transition: -moz-transform .5s ease-out;

}

.page1 {

background: url(image/background_01.png);

background-size: contain;

}

.page2 {

position: absolute;

/*background: url(image/employee_03.png);*/

background-size: 100% 100%;

}

.page3 {

position: absolute;

background: url(image/background_03.png);

background-size: 100% 100%;

}

.fg-image1 {

width: 100%;

height: auto;

position: absolute;

z-index: -1;

}

.fg-image2 {

width: 100%;

height: auto;

position: absolute;

z-index: -1;

margin-top: 30px;

}

.fg-image3 {

width: 100%;

height: auto;

position: absolute;

z-index: -1;

}

.flex-box {

height: 100%;

}

.flex-box .left {

width: 25%;

height: 100%;

background: #ffffff;

float: left;

}

.flex-box .right {

width: 70%;

float: left;

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-box-align: flex-start;

-ms-flex-align: flex-start;

-webkit-align-items: flex-start;

align-items: flex-start;

flex-wrap: wrap;

height: auto;

}

.flex-box .right .item {

flex: 0 0 33.33%;

padding: 5px;

box-sizing: border-box;

}

.flex-box .right .item img {

width: 100%;

}

/* the box animation */

.box {

width: 100px;

height: 100px;

background: black;

}

.play .myAnimation {

animation: move 1s ease 1 both;

-webkit-animation: move 1s ease 1 both;

}

@-webkit-keyframes move {

100% {

-webkit-transform: translate3d(150px, 0, 0);

transform: translate3d(150px, 0, 0);

-ms-transform: translate3d(150px, 0, 0);

}

}