How to make a responsive website with flexbox?

Question

css

how to make a site adaptive using flexbox in what units to specify font blocks so that everything is compressed to the size I need about media queries I know I'm only interested in units of measurement

Answer 1

I'm only interested in units of measurement

they have nothing to do with flexbox and responsiveness. Or, more correctly, they are indirectly related. You can use any units or combinations of them.
Site adaptability is a complex of measures. Something is achieved through the use of flexbox, something with media queries, something with relative units. And one does not exclude the other. Some blocks can be in one unit, others in another. Fonts can be in the third.
It is possible to give advice on the use of certain units only on the example of the layout section in a specific project, and not the design as a whole in an abstract project.
An experienced layout designer looks at the design and thinks about how to implement the adaptability of a particular block, having accordingly outlined a plan for each piece, decides in favor of certain units, adaptability methods, etc. And I emphasize that no one forbids you to use different units, you should not choose % for the entire project and then fuss with anything, just so as not to switch to px.

Answer 2

Just like it is done with bootstrap. You have a set of classes that changes its value at a certain screen width.
Let's take a common example:

<div class="row">
  <div class="col-md-4 col-xs-4"></div>
  <div class="col-md-4  col-xs-4"></div>
  <div class="col-md-4  col-xs-4"></div>
</div>

So we created a line with three blocks in it. In bootstrap 3, you set the float:left property to blocks;
In the case of flex, you need to set the .row property:

.row {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

You remove the columns Next, when adapting, you assign one property to .row: if you need the internal elements to be arranged in a column (column). For inner blocks, also write something like col-xs-12 so that they take up 100% of the parent's width on the phone. Nothing complicated. float:left
flex-direction:column;