To get WooCommerce product arcive converted to flexbox, add this to your CSS file:

.woocommerce .products ul::after,
.woocommerce .products ul::before,
.woocommerce ul.products::after,
.woocommerce ul.products::before{ content:none; }

.woocommerce .products ul,
.woocommerce ul.products{ display:flex; flex-wrap: wrap; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{ margin: 0 4% 2em 0; width: 22%; }

.woocommerce ul.products li.product.last,
.woocommerce-page ul.products li.product.last{ margin-right: 0; }

(Make sure the CSS is loaded after woocommerce.css and woocommerce-layout.css)