html中两行对齐,html – 使用flexbox在两行上对齐图像

我正在尝试创建一个包含6个框的Flexbox.

但是,由于某些原因,它们的行为不正确,因为它们的大小不同.

他们必须表现得像这样：

/* =================================

Base Styles

==================================== */

body {

display: flex;

flex-direction: column;

min-height: 100vh;

}

.row {

flex: 1;

}

/* =================================

Media Queries

==================================== */

@media (min-width: 769px) {

.main-header,

.main-nav,

.row {

display: flex;

}

.main-header {

flex-direction: column;

align-items: center;

}

.col {

flex: 1 50%;

}

.row {

flex-wrap: wrap;

}

.item-2 {

order: -1;

}

}

@media (min-width: 1025px) {

.main-header {

flex-direction: row;

justify-content: space-between;

}

.col {

flex-basis: 0;

}

.item-1 {

flex-grow: 1.4;

}

}