Wrap and Center

Wrap and Center

Medium CSS Flexbox Layout 27 views
Explanation Complexity

Problem Statement

Create wrapped chips that stay centered when they go to next line.

Input Format

No input.

Output Format

Print the HTML+CSS code in one block.

Constraints

Use flex-wrap and justify-content: center.

Input / Output Format

Input Format
No input.
Output Format
Print the HTML+CSS code in one block.
Constraints
Use flex-wrap and justify-content: center.

Examples

Input:
Output:
(HTML+CSS code)

Example Solution (Public)

CSS 
<!doctype html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <title>meetcode</title>
  <style>
    .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 360px; }
    .chip { padding: 8px 10px; border: 1px solid #ddd; border-radius: 999px; }
  </style>
</head>
<body>
  <div class='chips'>
    <span class='chip'>HTML</span>
    <span class='chip'>CSS</span>
    <span class='chip'>JavaScript</span>
    <span class='chip'>Python</span>
    <span class='chip'>PHP</span>
    <span class='chip'>SQL</span>
  </div>
</body>
</html>

Official Solution Code

<!doctype html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <title>meetcode</title>
  <style>
    .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 360px; }
    .chip { padding: 8px 10px; border: 1px solid #ddd; border-radius: 999px; }
  </style>
</head>
<body>
  <div class='chips'>
    <span class='chip'>HTML</span>
    <span class='chip'>CSS</span>
    <span class='chip'>JavaScript</span>
    <span class='chip'>Python</span>
    <span class='chip'>PHP</span>
    <span class='chip'>SQL</span>
  </div>
</body>
</html>
Please login to submit solutions.
Editor
Output

                                        

                                    

                                    

                                        

                                                                                    
Please login to submit solutions.