To arrange content into predictable columns, each of five items, would seem to be a job for display: grid:
ul { /* set the layout to grid: */ display: grid; /* define the number of rows you require: */ grid-template-rows: repeat(5, 1fr); /* set the flow of the grid to follow a columnar layout: */ grid-auto-flow: column;}<div><ul><li>Assertively mesh</li><li>client-centered</li><li>niches and covalent networks</li><li>Uniquely e-enable</li><li>team driven benefits</li><li>rather than exceptional</li><li>architectures Continually</li><li>foster cutting-edge</li><li>open-source core</li><li>process-centric</li></ul></div>Although, if you really want to use flex-box, you can:
*, ::before, ::after { margin: 0; padding: 0; box-sizing: border-box;}ul { /* Use the flexbox layout: */ display: flex; /* set the content direction to columns: */ flex-direction: column; /* let the contents wrap to new columns once the boundaries of the element are reached: */ flex-wrap: wrap; /* set the height of the containing element, in order for the wrapping to occur: */ height: 10em; /* entirely irrelevant: */ list-style: none; max-width:500px;}li { /* set the height of the individual'rows' to be 20% of the total height of the parent, to enforce the five- items per 'column': */ height: 2em; line-height: 2em; width: 45%;}/* Irrelevant, but allows 'column-headings' to be styled: */li:nth-child(5n + 1) { font-weight: bold; border-bottom: 1px solid #000;}<div><ul><li>Assertively mesh</li><li>client-centered</li><li>niches and covalent networks</li><li>Uniquely e-enable</li><li>team driven benefits</li><li>rather than exceptional</li><li>architectures Continually</li><li>foster cutting-edge</li><li>open-source core</li><li>process-centric</li></ul></div>