alignement de deux conteneur Flexbox

Par tyai, il y a 8 ans

Les bases HTML/CSS

bonsoir

je continue donc mon aprentissage de flexbox ( je préfere vraiment bootstrap mais imposssible)
donc j ai bien mes deux contenu une image et 3 icones avec du texte de chaque coté de celle-ci
mais impossible de les mettre en meme niveau je veut dire l'un a cote de l'autre je tourne en rond et puis en rond
voici donc mon bout de code

le html

<section id="services"> <h2>Nos services</h2> <hr class="split"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et <br>dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation </p> <div class="main_feature"><img src="images/main_feature.png"></div> <div class="services-conteneur"> <!--line--> <div class="services-box-texte"> <div class="centeredIcon"> <div class="icon fa fa-chart-line"></div> </div> <div class="featureListItem__description">ux design<br class="box"> The calendar feature makes scheduling a snap.<br>he calendar feature makes scheduling a snap.</div> </div> <!--cubes--> <div class="services-box-texte"> <div class="centeredIcon"> <div class="icon fa fa-cubes"></div> </div> <div class="featureListItem__description">ui design<br class="box"> The calendar feature makes scheduling a snap.<br>he calendar feature makes scheduling a snap</div> </div> <!--pie--> <div class="services-box-texte"> <div class="centeredIcon"> <div class="icon fa fa-chart-pie"></div> </div> <div class="featureListItem__description">seo<br class="box"> The calendar feature makes scheduling a snap.<br>he calendar feature makes scheduling a snap</div> </div> </section>

le css

services { text-align: center; } .main_feature{ display: flex; align-items: center; } .services-conteneur{ display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; } .services-box-texte { display: flex; align-items: center; max-width: 400px; padding: 10px; } .centeredIcon { display: flex; color: #3EADD6; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #D7DBDD; font-size: 20px; width: 90px; height: 90px; border-radius: 100%; box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.05); }

j avoue que je ne comprend pas bien pour quoi j ai beau tournée les parametre dans tout les sens mais la je sais plus
bon cela ne fais que 4 jours que je me suis mi a flex afin de le comprendreet il est vrai qu'il y a d autre propriété de flex que je n utilise pas

un petit coup de main n'est pas de refus

cordialment

10 réponses

Roak, il y a 8 ans

Salut,

Si ce sont tes éléments services-box-texte qui doivent être alignés, il faut enlever le flex-direction: column de service-conteneur.

tyai, il y a 8 ans

bonsoir

merci seenok je garde le lien de coté

roak je pense qu avec url cela sera mieux http://s717389256.onlinehome.fr/webagency/

en faite je veut que l image du mac sois a gauche et a droite les 3 icones avec le texte

merci beaucoup en tout cas a tous de m aider

ps : je continu mes investigations

Seenok, il y a 8 ans

Désolé, je vais pas pouvoir te répondre directement, car je pratique pas beaucoup le css encore, mais concernant les flexbox, fais un tour sur ce petit site http://flexboxfroggy.com/#fr si tu ne connais pas.

Seenok, il y a 8 ans

Re, en fait je vais essayer aussi :)

Mais petite précision, c'est tes div qui ont la classe "services-box-texte" que tu veux aligner sur la meme ligne ?

Seenok, il y a 8 ans

Hello,

Alors si j'ai bien pigé...

Essaies d'entourer tes div "main_feature" et "services-conteneur" par une autre div (qui a la classe "test")

<div class="test"> <div class="main_feature"><img src="images/main_feature.png"></div> <div class="services-conteneur"> <!--line--> <div class="services-box-texte"> <div class="centeredIcon"> <div class="icon fa fa-chart-line"></div> </div> <div class="featureListItem__description">ux design<br class="box"> The calendar feature makes scheduling a snap.<br>he calendar feature makes scheduling a snap.</div> </div> <!--cubes--> <div class="services-box-texte"> <div class="centeredIcon"> <div class="icon fa fa-cubes"></div> </div> <div class="featureListItem__description">ui design<br class="box"> The calendar feature makes scheduling a snap.<br>he calendar feature makes scheduling a snap</div> </div> <!--pie--> <div class="services-box-texte"> <div class="centeredIcon"> <div class="icon fa fa-chart-pie"></div> </div> <div class="featureListItem__description">seo<br class="box"> The calendar feature makes scheduling a snap.<br>he calendar feature makes scheduling a snap</div> </div> </div> </div>

et d'y appliquer les styles suivants.

.test{ display:flex; flex-direction: column; justify-content: flex-start; align-items: center; }
tyai, il y a 8 ans

merci seenok je vais essayer de suite pour voir et je reviens vers toi

Laznet, il y a 8 ans

Bonjour,

Si tu n'as pas peur de l'anglais tu peux aussi utiliser ça pour apprendre l'utilisation des flexbox : La doc de CSSTricks

tyai, il y a 8 ans

alors c est pas ça j ai un exdmple a quoi je veut arriver si cela peut aider

maquette

voila voila

tyai, il y a 8 ans

merci laznet je n avais pas vu ton post

tyai, il y a 8 ans

bonsoir

j'ai fini par comprendre mon erreur pas assez de box dans une box il mmanquais des imbrications

merci avous tous pour votre aide