Problems

Flexbox Layout

EasyCSS

Create a Flexbox layout with three columns. The first column should have a width of 30%, the second column should have a width of 40%, and the third column should have a width of 30%. The columns should be evenly spaced and have a padding of 10px.

Example 1

Input: <div class='container'><div class='column'>Column 1</div><div class='column'>Column 2</div><div class='column'>Column 3</div></div>

Output: <div class='container' style='display: flex; justify-content: space-between;'><div class='column' style='width: 30%; padding: 10px;'>Column 1</div><div class='column' style='width: 40%; padding: 10px;'>Column 2</div><div class='column' style='width: 30%; padding: 10px;'>Column 3</div></div>

The input is missing the Flexbox layout styles.

Constraints

  • The layout should use Flexbox
  • The columns should have widths of 30%, 40%, and 30%
  • The columns should be evenly spaced
  • The columns should have a padding of 10px

Hints

flexboxlayout
Flexbox Layout | CodeForge AI