Как верстать подобные непропорциональные блоки флексами?

fadveh, не за что. Если ваш дизайн выполнен по сеткам, можете взять сетку bootstrap(только сетку без доп. модулей), и это будет в 3 раза быстрее. Чистые флексы используются - когда шаблон очень нестандартный.

Как верстать подобные непропорциональные блоки флексами?

html-css, flex-box более предпочтителен, css-grid не имеет еще настолько большую поддержку на can i use, как у флексов

Gulp - BrowserSync выдаёт "cant get /", как решить проблему?

Вот вам пример моего gulp файла, попробуйте построчно пройти, проанализировать, и сделать на моем примере. Сравнив, найдете ошибку.

const gulp = require('gulp');
const sass = require('gulp-sass');
const concat = require('gulp-concat')
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const browserSync = require('browser-sync').create();
const sourcemaps = require('gulp-sourcemaps');
const gcmq = require('gulp-group-css-media-queries');
const uglify = require('gulp-uglify');

const config = {
    src: '.',
    css: {
        watch: '/precss/**/*.sass',
        src: '/precss/main.sass',
        dest: '/project/assets/css'
    },
    html: {
        src: '/project/*.html'
    },
    php: {
        src: '/project/*.php'
    }
};

gulp.task('build', function () {
    return gulp.src(config.src + config.css.src)
            .pipe(sourcemaps.init())
            .pipe(sass().on('error', sass.logError))
            .pipe(gcmq())
            .pipe(autoprefixer({
                overrideBrowserslist:  ['> 0.01%'],
                cascade: false
            }))
            // .pipe(cleanCSS({
            //     level: 2
            // }))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest(config.src + config.css.dest))
            .pipe(browserSync.reload({
                stream: true
            }));
});


gulp.task('watch', function () {
    gulp.watch(config.src + config.css.watch, gulp.parallel('build'));
    gulp.watch(config.src + config.html.src).on('change', browserSync.reload);
    gulp.watch(config.src + config.php.src).on('change', browserSync.reload);
});

gulp.task('browserSync', function () {
    browserSync.init({
        proxy: "http://project/",
        notify: false,
    });
});


gulp.task('default', gulp.parallel('watch','browserSync', 'build'));