html5右下角,html5 – Flexbox中心和右下角的项目

我已经找到了一个可行的解决方案.

.flex-center {

background-color: #739FD0;

color: #000000;

display: flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: center;

align-content: center;

align-items: center;

height: 400px;

}

.flex-center-bottom {

background-color: #739FD0;

color: #000000;

display: flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: flex-end;

align-content: center;

align-items: center;

}

.flex-item-center {

border: solid 2px #4675AA;

order: 0;

flex: 0 1 auto;

align-self: center;

}

.flex-item-bottom {

border: solid 2px #4675AA;

order: 1;

flex: 0 1 auto;

align-self: flex-end;

}

DROP FILES HERE

Hint: You can also drop files in the all files page

2017年更新：在谷歌浏览器Versión62.0.3202.89(Build oficial)(32位)中测试.

.flex-center,.flex-center-bottom {

align-items: center;

background-color: #739FD0;

color: #000000;

display: flex;

}

.flex-center {

height: 400px;

justify-content: center;

}

.flex-center-bottom {

justify-content: flex-end;

}

.flex-item-center {

border: solid 2px #4675AA;

font-family: Arial,sans-serif;

font-size: 1.6em;

line-height: 1px;

padding: 0 3px;

}

Some text in Box A

Some text in Box B...

我希望这可以帮助你.