CSS for Front-end Interviews/

...

/

Solution Review: CSS Flexbox Challenge

Solution Review: CSS Flexbox Challenge

The solution to the challenge of the CSS flexbox property is discussed in this lesson.

We'll cover the following...

Solution review: Responsive mini-website

Let’s have a look at the solution first.

Explanation

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

All the elements must have a border-box around them so that the padding and border are included in an element’s total width and height. The default margin and padding of all the elements are set to 0 because we want to add our custom values.

body {
  font-family: 'Helvetica Neue';
}

The font-family used in the challenge is Helvetica Neue.

#navbar {
  display: flex;
  background: #ddd;
  justify-content: flex-end;
}

The navbar is displayed as a flexbox by using display: flex;. The background color of the navbar is set to #ddd. The ...