Trouble Making Skills Table with FlexBox

Hello!  I am creating a sort of table to list skills in rows, what are meant to be rows of FlexBox containers with items inside of them.  I am having trouble using the HTML and CSS to do what I want: make multiple FlexBox rows of data that can sit beneath one another.  I will be able to read responses in 12 hours minimum from this post.  Here is what I have written and what it produces:

HTML 

        <div class="core_lists1_skills">
			<div class='prototype_row3container'>
				<p class='prototype_row3item bold_text'>Skill Name |</p>
				<p class='prototype_row3item bold_text'>| Custom Modifier |</p>
				<p class='prototype_row3item bold_text'>| Skill Difficulty |</p>
				<p class='prototype_row3item bold_text'>| Characteristic |</p>
				<p class='prototype_row3item bold_text'>| Skill Type |</p>
				<p class='prototype_row3item bold_text'>| Trained |</p>
				<p class='prototype_row3item bold_text'>| +10 Bonus |</p>
				<p class='prototype_row3item bold_text'>| +20 Bonus |</p>
			</div>
			<div class='prototype_row3container'>
				<p class='prototype_row3item bold_text'>Camoflage</p>
				<input name='attr_skillname_mod2' type='text' value='0' class='prototype_row3item prototype_row3item_num'>
				<p class='prototype_row3item bold_text'>Basic</p>
				<select name='attr_skillname_mod1' class='prototype_row3item prototype_row3item_stat'>
				  <option value='@{STR} + @{STR_advancement}' selected='selected'>STR</option>
				  <option value='@{TOU} + @{TOU_advancement}' >TOU</option>
				  <option value='@{AGI} + @{AGI_advancement}' >AGI</option>
				  <option value='@{WFR} + @{WFR_advancement}' >WFR</option>
				  <option value='@{WFM} + @{WFM_advancement}' >WFM</option>
				  <option value='@{INT} + @{INT_advancement}' >INT</option>
				  <option value='@{PER} + @{PER_advancement}' >PER</option>
				  <option value='@{CR} + @{CR_advancement}' >CR</option>
				  <option value='@{CH} + @{CH_advancement}' >CH</option>
				  <option value='@{LD} + @{LD_advancement}' >LD</option>
				</select>
				<p class='prototype_row3item bold_text'>Field</p>
				<input name="attr_skillname_mod3" type="checkbox" value="20" class='prototype_row3item'>
				<input name="attr_skillname_mod3" type="checkbox" value="30" class='prototype_row3item'>
				<input name="attr_skillname_mod3" type="checkbox" value="40" class='prototype_row3item'>
				<button type="roll" name="skillname_roll" value='/me rolls skillname with [[floor(([[@{skillname_mod1}]]+@{skillname_mod2}+[[@{skillname_mod3} -20]]+?{Modifier|0}-1d100)/10)]] degrees of success'></button>
			</div>
      </div>

CSS

.sheet-prototype_row3container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
}
.sheet-prototype_row3item {
	flex-basis: 20px;
	margin: 10px 5px
}
.sheet-prototype_row3item_stat { width: 70px }
.sheet-prototype_row3item_num { width: 35px }

What I get on left - all compacted onto one row instead of a new row.  Right image is one row

Is it meant to be on one row? The "nowrap" part could be stopping things form flowing to new rows.

You probably want to make the "core_lists1_skills" div a flexbox with a flex-direction of column. That way the two "prototype_row3container" divs will be on top of each other.

Thank you Spren, that worked!

Okay, this is good, but now I run into a new issue: alignment.  The skills are not really aligned in any sort of even way.  Is it possible for me to use the grid-template-columns property alongside this Flex display or is that not allowed?  Or better yet, is it possible to implement tool-tips to appear for when I hover my mouse cursor over any of these words and boxes or whatnot?

Rather than using flexbox for this, I'd recommend using css grid. Flex is great when you only care about a 1d layout, but for 2d layouts, you really need grid.

Scott C. said:

Rather than using flexbox for this, I'd recommend using css grid. Flex is great when you only care about a 1d layout, but for 2d layouts, you really need grid.

I was using Grid before, but took up using Flexbox for this specific Skillset table because of how I find it really difficult to evenly apply CSS to sections that have multiple completely different elements in them. 

You can try using a "justify-content: space-between" or a different justify-content on the row flex box to spread items out evenly. If there's enough space the should all line up, but I'm not sure if it will look right. Otherwise you'll probably need to give the items in the rows set width percentages. You can probably get away with just giving the Skill name and Characteristic columns a set width. The others look like they wouldn't really ever change size.

I have solved the problem!  Thank you.

No problem! If you feel your solution is worth sharing, please do, you never know when someone will come across this thread looking for answers to the same issues and you might help them if you share.