Flex jest jeszcze względnie nowym rozwiązaniem i nie jest tak powszechny jak grid (bootstrapowy lub na jego wzór), ale warto się nim zainteresować.
Najlepszym rozwiązaniem jest procentowy grid z jak najmniejszym nadpisywaniem styli dla różnych rozdzielczości w Media Queries.
Jakie jednostki? Zależy jakie potrzebujesz. Jeśli mówimy o treści skalowanej na różne rozdzielczości, wszelkie szerokości najlepiej podawać w procentach - ale gdy wiesz, że przykładowo jakiś blok ma zawsze mieć określoną szerokość, to też nie bój się pixeli. Jednostka 'em' często używana do czcionki ułatwia nam sprawę, gdy chcemy proporcjonalnie zmienić rozmiar wszystkich potomków elementu. Np. ustalamy na stronę główną wielkość czcionki 14px, na jakiś blok 2em (=28px), wewnątrz tekst, dajmy 'small' 0.93em(=26px). Gdy zmienimy czcionkę bloku (np dla innej rozdzielczości) na np. 1.86em(=26px), to znacznik small będzie miał czcionkę w rozmiarze 0.93*26 ~= 24px ;) (ułatwia życie - nie trzeba wszędzie zmieniać pixeli). Czasami jak odwołujemy się do potomka, potomka, potomka (głęboko) ciężko jest odpowiednio liczyć wielkości, to możemy stosować jednostki 'rem'. Są one relatywne względem głównej czcionki dokumentu.
Ale wracając do pxieli - jeśli coś niezależnie od innych wielkości ma być ustalone - warto je stosować (albo 'rem'y).
Co do szerokości strony - czy ustalona czy 100% - zależy od projektu, jednak częściej spotykam się z rozwiązaniami dla contentu na max 1200px.
Edit: marginesy / paddingi - staraj się unikać konstrukcji margin-right: 5px; padding-bottom: 15px; jeśli możesz stosować je wymiennie - stosuj tylko jeden z rodzajów odstępów, nie mieszaj ;) . Co innego, gdy zależy nam na określonej szerokości (paddingi są wliczane do szerokości dla box-sizing: border-box; marginesy nie) lub przy obramowaniu są kluczowe różnice.