CSS Utilites

Question 1

How to fill a box with an image without distorting it

Answer 1

.box img {
width: 100%;
height: 100%;
}

<div class="box box1"><img></div>\

Question 2

How to center an item

Answer 2

.wrapper {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div>
<div>center me!</div>
</div>

Question 3

Basic concepts of flexbox

Answer 3

row
row-reverse
column
column-reverse

Question 4

Start and end lines

Answer 4

In the past, CSS was heavily weighted towards horizontal and left-to-right writing modes
Modern layout methods encompass the range of writing modes

Question 5

flex-direction

Answer 5

Items display in a row

Question 6

main dimension

Answer 6

The items do not stretch on the main dimension, but can shrink

Question 7

flex-basis

Answer 7

property is set to auto

Question 8

flex-wrap

Answer 8

property is set to nowrap.

Question 9

flex-basis

Answer 9

is what defines the size of that item in terms of the space it leaves as available space

Question 10

flex-grow

Answer 10

If we gave all of our items in the example above a flex-grow value of 1 then the available space in the flex container would be equally shared

Question 11

flex-shrink

Answer 11

do not have enough space in the container to lay out our items, and flex-shrink is set to a positive integer, then the item can become smaller than the flex-basis