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

I saw an example in w3schools. they gave a percentage to flex-grow and I don't know how does it work? I thought that we can use just number for flex-grow and now I don't know what is the result of percentage value. I need to help... the example is here https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_flex

Bei der Anwendung von css flex und flex-flow property gibt es das Beispiel https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_flex-flow Es geht in allen Browsern. Außer in Windows Safari Version 5.1.7 und IPhone 4 Safari IOS 7.1.2 (Safari 7) Version. Hier arbeitet das flex-flow Property nicht. (sceen shots)

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!

Hello,i have a problem with the css rule display: flex. Well to be honest, the problem is with the Safari browser. Every other browser displays the page as i intend it to display, but with Safari there´s a problem. I have a container with the class of promo that holds tree colomns with the class of coluna. The CSS is as fallows: .conteudo .promo { max-width: 100%; display:flex; display:-webkit-flex; flex-flow:row wrap; -webkit-flex-flow:row wrap; justify-content:center; } .conteudo .promo .coluna{ -moz-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; max-width: 32%; padding: 5px; margin: 5px; display:flex; display:-webkit-flex; flex-flow:column; -webkit-flex-flow:column; } Is there anything i´m doing wrong because only in Safari the page isn´t displayed as it should.I´d really need some help. Please!!!!The page is on: www.sistemagestorconteudos.net/Alfaccop/Sitio8 Torsuntsu