1. Accueil
  2. Question et réponse
  3. comment avoir un parfait cercles css sensibles?

comment avoir un parfait cercles css sensibles?

2017-10-16 7 views
2

En cours d'apprentissage flexbox, et confus d'avoir des cercles CSS parfaits qui sont sensibles. Comment je fais ça? En l'état, mon code actuel a circle1, circle2 et circle3 à 100 width et height. Je ne veux pas coder en dur leur taille mais plutôt la rendre réactive. Y a-t-il un moyen d'avoir un cercle parfait en%? Donc, il évolue chaque fois que le navigateur est redimensionné?comment avoir un parfait cercles css sensibles?

Ou sont les requêtes de médias la seule option pour résoudre ce problème?

Nous vous remercions de votre aide.

\t \t \t * { 
 
\t \t \t \t box-sizing: border-box; 
 
\t \t \t } 
 

 
\t \t \t html, body { 
 
\t \t \t \t height: 100%; 
 
\t \t \t \t font-family: sans-serif; 
 
\t \t \t \t font-weight: 100; 
 
\t \t \t } 
 

 
\t \t \t body { 
 
\t \t \t \t display: flex; 
 
\t \t \t \t margin: 0; 
 
\t \t \t \t flex-direction: column; 
 
\t \t \t } 
 

 
\t \t \t main { 
 
\t \t \t \t display: flex; 
 
\t \t \t \t flex: 1 0 100%; 
 

 
\t \t \t \t /*for content and sidebar */ 
 
\t \t \t \t flex-direction: row; 
 
\t \t \t } 
 

 
\t \t \t /* main */ 
 
\t \t \t #content { 
 
\t \t \t \t flex: 1 0 80%; 
 

 
\t \t \t \t /* for header/logo and description */ 
 
\t \t \t \t display: flex; 
 
\t \t \t \t flex-direction: column; 
 
\t \t \t } 
 

 
\t \t \t #description img { 
 
\t \t \t \t display: block; 
 
\t \t \t } 
 

 
\t \t \t #header { 
 
\t \t \t \t flex: 1 0 5%; 
 
\t \t \t \t padding: 10px; 
 
\t \t \t \t /* for test */ 
 
\t \t \t \t display: flex; 
 
\t \t \t \t justify-content: center; 
 
\t \t \t } 
 

 
\t \t \t #test { 
 
\t \t \t \t display: flex; 
 
\t \t \t \t flex-direction: row; 
 
\t \t \t } 
 

 
\t \t \t #header h1 { 
 
\t \t \t \t text-align: center; 
 
\t \t \t \t font-size: 5em; 
 
\t \t \t \t padding: 0; 
 
\t \t \t \t margin: 0; 
 
\t \t \t  font-family: 'Satisfy', cursive; 
 
\t \t \t } 
 

 
\t \t \t h1 { 
 
\t \t \t \t  font-family: 'Satisfy', cursive; 
 
\t \t \t } 
 

 
\t \t \t #description { 
 
\t \t \t \t flex: 1 0 10%; 
 
\t \t \t \t padding: 30px; 
 
\t \t \t \t display: flex; 
 
\t \t \t } 
 

 
\t \t \t #description p { 
 
\t \t \t \t padding-left: 20px; 
 
\t \t \t \t font-size: 20px; 
 
\t \t \t } 
 

 
\t \t \t #description img { 
 
\t \t \t \t width: 250px; 
 
\t \t \t \t height: 250px; 
 

 
\t \t \t \t border-radius: 50%; 
 
\t \t \t \t border: 6px solid #db6525; 
 
\t \t \t \t border: 6px solid #00B2AC; 
 
\t \t \t } 
 

 
\t \t \t #name { 
 
\t \t \t \t font-size: 35px; 
 
\t \t \t \t color: #db6525; 
 
\t \t \t \t  font-family: 'Satisfy', cursive; 
 
\t \t \t } 
 

 
\t \t \t #test img { 
 
\t \t \t \t display: inline; 
 
\t \t \t \t vertical-align: text-top; 
 
\t \t \t \t width: 100px; 
 
\t \t \t \t height: 100px; 
 
\t \t \t \t /* for the following image and description */ 
 
\t \t \t \t display: flex; 
 
\t \t \t \t flex-direction: row; 
 
\t \t \t \t align-content: center; 
 
\t \t \t \t align-items: center; 
 
\t \t \t } 
 

 
\t \t 
 

 
\t \t \t #sidebar { 
 
\t \t \t \t flex: 1 0 20%; 
 
\t \t \t \t /* background-color: green; */ 
 
\t \t \t \t text-align: center; 
 
\t \t \t \t line-height: 90%; 
 

 
\t \t \t \t /* for sidebar contents */ 
 
\t \t \t \t display: flex; 
 
\t \t \t \t flex-direction: column; 
 
\t \t \t } 
 

 

 
\t \t \t #js { 
 
\t \t \t \t flex: 1 0 33.33333%; 
 
\t \t \t \t /* background-color: red; */ 
 
\t \t \t \t background-color: #db6525; 
 
\t \t \t \t border: 20px solid #00B2AC; 
 
\t \t \t \t padding: 10px; 
 
\t \t \t } 
 

 
\t \t \t #js h1 { 
 
\t \t \t \t font-size: 50px; 
 
\t \t \t } 
 

 
\t \t \t #forms { 
 
\t \t \t flex: 1 0 33.33333%; 
 
\t \t \t \t /* background-color: gray; */ 
 
\t \t \t \t background-color: #db6525; 
 
\t \t \t \t border: 20px solid #00B2AC; 
 
\t \t \t \t padding: 10px; 
 
\t \t \t } 
 

 
\t \t \t #forms h1 { 
 
\t \t \t \t font-size: 50px; 
 
\t \t \t } 
 

 
\t \t \t #sites { 
 
\t \t \t flex: 1 0 33.33333%; 
 
\t \t \t \t /* background-color: Chartreuse; */ 
 
\t \t \t \t background-color: #db6525; 
 
\t \t \t border: 20px solid #00B2AC; 
 
\t \t \t padding: 10px; 
 
\t \t \t } 
 

 
\t \t \t #sites h1 { 
 
\t \t \t \t font-size: 50px; 
 
\t \t \t } 
 

 
\t \t \t .circles { 
 
\t \t \t \t flex: 0 0 5%; 
 

 
\t \t \t \t /* for circles within */ 
 
\t \t \t display: flex; 
 
\t \t \t justify-content: center; 
 
\t \t \t align-items: center; 
 
\t \t \t width: 100%; 
 
\t \t \t } 
 

 
\t \t \t .circle1 { 
 
\t \t \t \t flex: 0 1 33.33333%; 
 
\t \t \t \t display: flex; 
 
\t \t \t \t justify-content: center; 
 

 
\t \t \t } 
 

 

 
\t \t \t .circle1 h1{ 
 
\t \t  font-size: 12px; 
 
\t \t  color: #fff !important; 
 
\t \t  background-color: #db6525; 
 
     border: 4px solid #00B2AC; 
 
\t \t \t \t border-radius:50%; 
 
\t \t \t \t height: 100px; 
 
     width: 100px; 
 
\t \t \t \t text-align: center; 
 
\t \t \t \t vertical-align: middle; 
 
\t \t \t } 
 

 
\t \t \t .circle2 { 
 
\t \t \t \t flex: 0 1 33.33333%; 
 
\t \t \t \t display: flex; 
 
\t \t \t \t justify-content: center; 
 
\t \t \t } 
 

 
\t \t \t .circle2 h1 { 
 
    \t \t font-size: 12px; 
 
    \t \t color: #fff !important; 
 
    \t \t background-color: #db6525; 
 
     border: 4px solid #00B2AC; 
 
\t \t \t \t border-radius:50%; 
 
\t \t \t \t height: 100px; 
 
     width: 100px; 
 
    \t \t text-align: center; 
 
\t \t \t \t vertical-align: middle; 
 
\t \t \t } 
 

 
\t \t \t .circle3 { 
 
\t \t \t \t flex: 0 1 33.33333%; 
 
\t \t \t \t display: flex; 
 
\t \t \t \t justify-content: center; 
 
\t \t \t } 
 

 
\t \t \t .circle3 h1 { 
 
    \t \t font-size: 12px; 
 
    \t \t color: #fff !important; 
 
    \t background-color: #db6525; 
 
     border: 4px solid #00B2AC; 
 
\t \t \t \t border-radius:50%; 
 
\t \t \t \t height: 100px; 
 
     width: 100px; 
 
     text-align: center; 
 
\t \t \t \t vertical-align: middle; 
 
\t \t \t }
\t \t <main> 
 

 
\t \t \t <section id="content"> 
 
\t \t \t \t <article id="header"> 
 

 
\t \t \t \t \t <section id="test"> 
 
\t \t \t \t \t \t <h1>My Website</h1> 
 
\t \t \t \t \t </section> 
 

 
\t \t \t \t </article> 
 

 
\t \t \t \t <article id="description"> 
 

 
\t \t \t \t \t <img src='images/profilePic.png' /> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <p></p> 
 

 

 
\t \t \t \t </article> 
 

 
\t \t \t \t \t <article class="circles"> 
 
\t \t \t \t \t \t <div class="circle1"> 
 
\t \t \t \t \t \t \t <h1>Twitter</h1> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="circle2"> 
 
\t \t \t \t \t \t \t \t <h1>Blog</h1> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="circle3"> 
 
\t \t \t \t \t \t \t \t <h1>Contact</h1> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t </article> 
 

 
\t \t \t </section> 
 

 
\t \t \t <section id="sidebar"> 
 
\t \t \t \t <article id="js"> 
 
\t \t \t \t \t <h1>Javascript</h1> 
 
\t \t \t \t \t <p>Mini JS Projects</p> 
 
\t \t \t \t \t <p class="subtitle">Work in progress 
 
\t \t \t \t </article> 
 
\t \t \t \t <article id="forms"> 
 
\t \t \t \t \t <h1>Free Forms</h1> 
 
\t \t \t \t \t <p>Feel free to download the forms</p> 
 
\t \t \t \t </article> 
 
\t \t \t \t <article id="sites"> 
 
\t \t \t \t \t <h1>Portfolio</h1> 
 
\t \t \t \t \t <p>Combination of previous work and additional sites</p> 
 
\t \t \t \t </article> 
 
\t \t \t </section> 
 

 
\t \t </main>

Source

2017-10-16 user273072545345

Répondre

0

réponse Mise à jour

que nous avons retravaillé les conteneurs flexibles pour un exemple de travail minimum. Le flex-articles doivent tous être mis à

flex: 1 1 auto /* flex-grow flex-shrink flex-basis */

Cela permet au circle h1 flex-items de grandir et rétrécir si nécessaire. Il peut être nécessaire d'utiliser js pour obtenir la hauteur d'un cercle à partir de sa largeur étendue lorsque vous appliquez l'exemple à votre code.

Espérons que cela aide.

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: sans-serif; 
 
} 
 

 
.circles { 
 
    /* for circles within */ 
 
    display: flex; 
 
    justify-content: center; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.circle1, 
 
.circle2, 
 
.circle3 { 
 
    display: flex; 
 
    flex: 1 1 auto; 
 
    width: 33vw; 
 
    height: 33vw; 
 
} 
 

 
.circle1 h1, 
 
.circle2 h1, 
 
.circle3 h1 { 
 
    flex: 1 1 auto; 
 
    width: 100%; 
 
    height: 100%; 
 
    font-size: 12px; 
 
    color: #fff !important; 
 
    background-color: #db6525; 
 
    border: 4px solid #00B2AC; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}
<article class="circles"> 
 
    <div class="circle1"> 
 
    <h1>Twitter</h1> 
 
    </div> 
 
    <div class="circle2"> 
 
    <h1>Blog</h1> 
 
    </div> 
 
    <div class="circle3"> 
 
    <h1>Content</h1> 
 
    </div> 
 
</article>

Source

2017-10-17 01:33:43 jfeferman

+0

Je me demandais juste en fonction de votre observation que depuis la h1 ne sont pas des descendants directs, donc si je fait le circle1, circle2 et affichage circle3 ': flex' qu'il "développer"? Pour ce que ça vaut, dans mon code affiché ci-dessus, je l'ai fait ... ai-je mal compris ce que vous avez dit? – user273072545345

+0

Et c'est ce que vous avez fait, mais vous imbriquez plusieurs conteneurs flex et ils sont définis sur "flex-grow: 0". Les deux options flex-grow et flex-shrink doivent être définies sur 1 afin que les cercles puissent être redimensionnés. J'ai mis à jour l'exemple pour utiliser le h1 en tant que flex-item de 'circle' et stylisé par le sélecteur' circle h1'. – jfeferman

+0

L'extrait ci-dessus fonctionne. Si vous allez en plein écran et redimensionnez la fenêtre, vous verrez que les cercles sont parfaitement réactifs. Il peut y avoir des problèmes avec les conteneurs Flex en amont lorsque vous appliquez l'exemple. Je trouve ce qui suit un guide pratique pour flex: [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a -guide-to-flexbox /) – jfeferman

1

La question est maintenant Comment avoir une parfaite réponse css carré? Parce que quand vous avez un carré, vous aurez facilement un cercle avec border-radius: 50%. Maintenant, vous pouvez trouver autant de solutions pour cela dans SO. Voici un nice solution avec un élément Flexbox.


 

 
.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    display: flex; 
 
    
 
} 
 
.flex-item { 
 
    background: tomato; 
 
    margin: 5px; 
 
    color: white; 
 
    flex: 1 0 auto; 
 
    border-radius: 50%;  
 
} 
 
.flex-item:before { 
 
    content:''; 
 
    float:left; 
 
    padding-top:100%; 
 
}
<div class="flex-container"> 
 
    <div class="flex-item "> 
 
    </div> 
 
    <div class="flex-item "> 
 
    </div> 
 
    <div class="flex-item "> 
 
    </div> 
 
</div>

Source

2017-10-17 04:01:37 Duannx

 Questions connexes

  • Aucun problème connexe^_^