Pergunta de entrevista da empresa Zillow
GIVEN: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sample Title</title> </head> <body> <div class="wrapper"> <div>A</div> <div>B</div> <div>C</div> </div> </body> USING CSS: // Make a 3 column layout that is: // • Is the full width of the page // • Has even width columns // • Gutter space in between (width doesn't matter, just an even gap between each is fine.) // • Responsive. Stack the columns on displays narrower than 320px // For a challenge try: // • Make the center column wider than the outer two. // • Make the first column (A) appear farthest too the right- without changing the markup order // // Browser should look like this: // ------------- // |A |B |C | // | | | | // | | | | // | | | | // ------------- //
Resposta da entrevista
Sigiloso
Extremely simple question if using flexbox. Make wrapper div full width then use flex display and space-between for justify-content. This will care of both gutter space and having even width. Use media query to change direction to column instead of the default row when 320px width or less. Use the grow property to assign the 2nd child of div to have 2 vs. 1 for other children. Set direction to row-reverse to flip the order of the contents without changing markup.