Difficulty achieving a layout with flex box

[DarkxPunk]

Hi there,

So I am trying to do something a little strange with flex boxes. I have 4 items in a container, I want the first item to take up the full width, and the three other items to flow side by side. Now I have been able to achieve it so long as I set the width of the last three items, however the whole point and fluidity of a flex box is I shouldn't have to do that! If I do not define the width and tell it to align to content everything fills the screen, if I take the content and strictly restrict its width the parent does not shrink as it should to the content. Here is an image to show what I mean:

I am extremely new to flex box so I may be missing something simple. Below is the relevant HTML and CSS:

		<section id="services-brief-flex">
			<div class="title">
				<h1>How we can help</h1>
			</div>
			<article id="secruity-cameras-flex">
				<div class="center-flex">
					<h2>Security Cameras</h2>
					<p>What matters is longevity. We setup all our customers with the materials, and installation quality that leave you with a system that will last, and keep you future proof.</p>
				</div>
			</article>
			<article id="secruity-cameras-flex">
				<div class="center-flex">
					<h2>Security Assessment</h2>
					<p>Not feeling secure? Speak with us about reviewing your setup. We will work with you to find what is lacking in your system and connect you with the right solutions.</p>
				</div>
			</article>
			<article id="secruity-cameras-flex">
				<div class="center-flex">
					<h2>Access Control</h2>
					<p>One door, maybe ten, how about a hundred? Regardless of your scale we work with a wide range of systems to fit your needs. Cloud solutions, or in-house, we got you covered.</p>
				</div>
			</article>
		</section>

#services-brief-flex {
	margin: 0 0 4.75rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#services-brief-flex .title {
	text-align: center;
	flex-basis: 100vw;
}
#services-brief-flex .title h1 {
	font-size: 1.8rem;
	font-weight: bold;
	text-transform: uppercase;
}
#services-brief-flex article {
	flex-basis: content;
	letter-spacing: 0.06rem;
	box-sizing: border-box;
	color: #fcfcfc;
	background-color: #021d44;
}
#services-brief-flex article .center-flex {
	width: 30%;
	display: inline-block;
}
#services-brief-flex article h2 {
	text-align: center;
}

Thanks for any help!

[dsonesuk]

You need to target the first direct children using flex-box, set default value to equal height and width flex: 1 1 0; then with first element set to full width and using flex-wrap, the remainder moving to next line should adjust to equal width to fill the full width side by side, WITHOUT width being set.

The min-width is used to prevent width resizing to ridiculous size, the size is that of small mobiles 320px - padding etc.

            #services-brief-flex {
                margin: 0 0 4.75rem;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
            }
            #services-brief-flex article {flex: 1 1 0; min-width: 290px;}
            #services-brief-flex .title {
                text-align: center;
				width: 100vw;
            }
            #services-brief-flex .title h1 {
                font-size: 1.8rem;
                font-weight: bold;
                text-transform: uppercase;
            }
            #services-brief-flex article {

                letter-spacing: 0.06rem;
                box-sizing: border-box;
                color: #fcfcfc;
                background-color: #021d44;

            }

            #services-brief-flex article h2 {
                text-align: center;
            }

 

[dsonesuk]

Actually thinking about it, doing it without min-width, using flex-basis with the min-width I suggested for small mobiles, you could use:

flex: 1 0 290px;

To give same result, it will stretch but not shrink below 290px.

[DarkxPunk]

Thank you very much!

Reading up on the flex property I see its short hand for flex-grow flex-shrink flex-basis. I didn't expect that to be necessary, I thought the flex-basis would be enough when I was reading through about flex-box. But this is a lessoned learned.

Thanks again!