flexbox practice excercises

Flexbox Übung excercises

Ich habe dieses Repo mit der Absicht erstellt, zu üben, wie viel Flexbox ich gemeistert habe, um Layouts und Stilkomponenten mithilfe der CSS Flexbox zu erstellen.

Auf halbem Weg dachte ich, warum nicht andere Entwickler erlauben, ihre Flexbox -Meisterschaft auch zu präsentieren.

Wie man beiträgt

1. Fork das Repo
2. Erstellen Sie einen neuen Ordner im Stammverzeichnis und fügen Sie dort Ihre Flex -Projektdateien hinzu.
3. Nachdem Sie Ihr Projekt abgeschlossen haben, fügen Sie den Link zu Ihrer Projektdatei in der Datei root index.html mit dem folgenden Format hinzu.

...

< li class =" nav__item " >
  < a href =" equal-height-cards/index.html " class =" nav__link " >
    Create cards with equal heights
  </ a >
</ li >

...

VORSICHT!!! : Stellen Sie sicher, dass Sie zu Beginn des HREF -Links keinen Vorwärtsstrahl ( /) hinzufügen, andernfalls funktioniert der Link zu Ihrem Projekt nicht!.

4. Sie können Ihren Namen am Ende des Links anhängen, damit andere wissen, dass Sie das Projekt erstellt haben oder nach Ihnen suchen, z.

 < li class =" nav__item " >
  < a href =" equal-height-cards/index.html " class =" nav__link " >
    Create cards with equal heights - John Mwendwa
  </ a >
</ li >

5. Versuchen Sie, nur Flexbox für Ihre Layouts und Ihr Design zu verwenden, um zu sehen, wie viel Sie aufgebracht haben.

6. Wenn Sie auch Ihre CSS- Grid- Meisterschaft vorstellen möchten, sehen Sie sich mein anderes Repo auf CSS-Raster an und leisten Sie hier https://github.com/johnmwendwa/grid-practice-excercises

7. Vergessen Sie nicht, das Repo zu spielen?

Word an Designer!

Wenn Sie ein extrem gutes Auge für das Design haben, können Sie den Root style.css Stylesheet ändern. Obwohl alle Ihre Änderungen nicht immer garantiert werden, ist es immer die Mühe wert.

Live -Demo

https://johnmwendwa.github.io/flexbox-practice-excercises