Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

    /* Dienstleistungen*/

    .dienstleistungen{

      justify-content: center;

      width: 75%;      

    }

    .mofa-zündung-service{

      height: 50%;

      width: auto;

    }

    .mofa-getriebe-revisionen{

     height: 25%;

     width: auto;

     align-self: top;

    }

    .mofa-vergaser-tuning{

      height: 25%;

      width: auto;

      align-self: top;

    }

   

    .mofa-kolben-ersatzteile{

      height: 25%;

      width: 50%;

    }

    /*!Dienstleistungen*/

HTML:

    <h3>Dienstleistungen</h3>

    <div class="Dienstleistungen">

        <li><a href="#">Service</a></li>

        <li><a href="#">Revisionen</a></li>

        <li><a href="#">Tuning</a></li>

        <li><a href="#">Ersatzteile</a></li>

        <div class="bilder_dienstleistungen">

            <img src="Bilder/zündung.jpg" alt="zündung" class="mofa-zündung-service">

            <img src="Bilder/mofa-getriebe.png" alt="getriebe" class="mofa-getriebe-revisionen">

            <img src="Bilder/vergaser 2.png" alt="vergaser" class="mofa-vergaser-tuning">

            <img src="Bilder/kolben.png" alt="kolben"   class="mofa-kolben-ersatzteile">

        </div>

    </div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

Bild zum Beitrag
Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, developement, developer, Programmiersprache, Webdesign, Webdesigner, Webentwicklung, Frontend, Visual Studio Code
TabBar mit Dart/Flutter?

Hallo bin gerade dabei eine App mit Flutter zu programmieren und wollte gerade eine TabBar machen, jedoch funktioniert es nicht. Also ich bekomme es hin das sie angezeigt wird, aber sobald ich das einbaue das pro Tab eine andere Seite angezeigt wird, wird mir die Tabbar 5 mal angezeigt. Kann mir jemand helfen und sagen was das Problem ist.

Hier mein Code:

class Uebersicht extends StatelessWidget {
  const Uebersicht({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(
          title: Text("Übersicht"),
          bottom: TabBar(
            tabs: [
              Tab(text: 'Home', icon: Icon(Icons.home)),
              Tab(text: 'Videos', icon: Icon(Icons.article_outlined)),
              Tab(text: 'Bilder', icon: Icon(Icons.add_call)),
              Tab(text: 'About', icon: Icon(Icons.backpack_outlined)),
            ],
          ),
        ),
        drawer: Sidebar(),
        body: TabBarView(
          children: [
            Uebersicht(),
            Videos(),
            Bilder(),
            About(),
          ],
        ),
      ),
    );
  }

Main.dart

class ApoSys extends StatelessWidget {
  const ApoSys({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ApoSys-Notdienst System für Apotheken',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: Uebersicht(),
      routes: {
        'home': (context) => Uebersicht(),
        'apotheken': (context) => Apotheken(),
        'bezirk_melk': (context) => Bezirk_Melk(),
        'bezirk_amstetten': (context) => Bezirk_Amstetten(),
        'bezirk_scheibbs': (context) => Bezirk_Scheibbs(),
        'kalender': (context) => Kalender(),
        'notdienst': (context) => Notdienst(),
        'notrufe': (context) => Notrufe(),
        'videos': (context) => Videos(),
        'bilder': (context) => Bilder(),
        'about': (context) => About(),
      },
    );
  }
}

Die Widget für Videos, Bilder und About existieren, es funktioniert auch das die Seiten angezeigt werden, jedoch wird wie beschrieben die TabBar 6 mal angezeigt.

Danke für die Antworten im Vorraus!

Bild zum Beitrag
PC, Computer, App, Technik, programmieren, Design, iOS, Tabs, Android, Dart, developement, Mediengestaltung, Navigation, Softwareentwicklung, Technologie, Backend, Flutter