Order Summary Component using Flexbox

Community feedback

• 

  John Omoke•240

  @jomoke814Posted about 2 years ago

  Congratulation on completing your 1st frontend challenge. To answer your question is Yes, You can use flexbox on pricing details to align them simply by grouping the music icon and annul plan together like so:

  <div class="price"> <div class="section-price"> <img src="images/icon-music.svg" alt="music-icon"> <div> <h2>Annual Plan</h2> <p>$59.99/year</p> </div> </div> <p class="para-price">Change</p> </div> and you apply CSS flexbox styles .price { display: flex; border-radius: 10px; padding: 10px; gap: 50px; }

  Your second answer is that it comes down to personal preference and what a developer feels is easier for the given task. One way to think about the different uses of Grid and Flexbox is to consider whether your design originates with the content, or from the overall layout. If starting with the content, and working from the most minor parts outwards, then a developer is using Content-First Design. This is an excellent opportunity to use Flexbox because of the flexibility it provides in manipulating code in one dimension - along either rows or columns. If, however, a developer is given a specific overall layout to adhere to and needs explicit placement of elements in two dimensions, using both rows and columns, then Grid would be much better suited. For more about flexbox and grid read this article: https://webdesign.tutsplus.com/articles/flexbox-vs-css-grid-which-should-you-use--cms-30184

  Marked as helpful

  0

  ---

  

  Candice•50

  @candiukPosted about 2 years ago

  Hi @jomoke814, Thank you for your feedback. I will try to implement the flexbox code you suggested for the pricing details.

  Thank so much for the link, I'll dive more into grid vs flexbox and hopefully I'll come out with a better understanding.

  0