如何制作这种响应式设计？

Question

I want to make this responsive design using html and css with flexbox:

this is my code:

 span { font-weight: bold; color: aqua; } .parent { display: flex; width: 100%; height: 100px; background-color: white; justify-content: space-around; align-items: center; } .child { display: flex; width: 18%; height: 71px; background-color: #eee; align-items: center; justify-content: center; } /*small screen*/ @media (max-width: 991px) { span { font-weight: bold; color: black; } .parent { display: flex; width: 100%; background-color: white; justify-content: space-around; align-items: center; flex-wrap: wrap; } .child { display: flex; width: 100%; height: 71px; background-color: #eee; align-items: center; justify-content: center; margin-bottom: 10px; } } /*medium screen*/ @media (min-width: 992px) { span { font-weight: bold; color: red; } .parent { display: flex; width: 100%; background-color: white; align-items: center; flex-wrap: wrap; } .child { display: flex; width: 45%; height: 71px; background-color: #eee; align-items: center; justify-content: center; margin-bottom: 15px; } } /*large screen*/ @media (min-width: 1200px) { span { font-weight: bold; color: aqua; } .parent { display: flex; width: 100%; height: 100px; background-color: white; justify-content: space-around; align-items: center; } .child { display: flex; width: 18%; height: 71px; background-color: #eee; align-items: center; justify-content: center; } }

 <div class="parent"> <div class="child"><span>Product one</span>This Is Product</div> <div class="child"><span>Product two</span>This Is Product</div> <div class="child"><span>Product three</span>This Is Product</div> <div class="child"><span>Product four</span>This Is Product</div> </div>

there is many differences between my code and the design above how can I fix the problems in the code to have like this design? small screen: max-width: 991px. medium screen: min-width: 992px. large screen: min-width: 1200px.

Answer 1

You should add flex-direction:column; to .child class.