Search the Community

Hi, every body I have some problem with css align item in flexbox. Like bellow images. Can anyone help me? i will happy to have your answers. thank you

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!