chore(css): Move CSS examples - Learn CSS, How To, Flexbox basics

[bsmth]

Description

As part of an initiative to reduce repo maintenance & code duplication, this PR moves some external examples into content. This PR converts the following macros to live samples:

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}}
{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}
{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 1000)}}
{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}}
{{EmbedGHLiveSample("css-examples/howto/box-shadow-button.html", '100%', 500)}}
{{EmbedGHLiveSample("css-examples/howto/text-shadow.html", '100%', 500)}}
{{EmbedGHLiveSample("css-examples/howto/center.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/howto/object-fit.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/howto/highlight_first_line.html", '100%', 750)}}
{{EmbedGHLiveSample("css-examples/howto/highlight_first_line2.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/howto/highlight_first_para.html", '100%', 770)}}
{{EmbedGHLiveSample("css-examples/howto/highlight_h1_plus_para.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/howto/opacity.html", '100%', 770)}}
{{EmbedGHLiveSample("css-examples/howto/transition-button.html", '100%', 720)}}
{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}}
{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}
{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}
{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}
{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}
{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}
{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}
{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}
{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}
{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}
{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}
{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}
{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}
{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}
{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}

Motivation

Motivation is described in the project issue.

Related issues and pull requests

• [PROJECT] Move embedded css-examples into content mdn#597

[github-actions]

Preview URLs (14 pages)

• /en-US/docs/Learn/CSS/First_steps/Getting_started
• /en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured
• /en-US/docs/Learn/CSS/First_steps/Styling_a_biography_page
• /en-US/docs/Learn/CSS/Howto/Add_a_shadow
• /en-US/docs/Learn/CSS/Howto/Add_a_text_shadow
• /en-US/docs/Learn/CSS/Howto/Center_an_item
• /en-US/docs/Learn/CSS/Howto/Fill_a_box_with_an_image
• /en-US/docs/Learn/CSS/Howto/Highlight_first_line
• /en-US/docs/Learn/CSS/Howto/Highlight_first_para
• /en-US/docs/Learn/CSS/Howto/Highlight_para_after_h1
• /en-US/docs/Learn/CSS/Howto/Make_box_transparent
• /en-US/docs/Learn/CSS/Howto/Transition_button
• /en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
• /en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis

External URLs (3)

URL: /en-US/docs/Learn/CSS/First_steps/Styling_a_biography_page
Title: Styling a biography page

• https://codepen.io/ (1 time) (Note! This may be a new URL 👀)
• https://glitch.com/ (1 time) (Note! This may be a new URL 👀)
• https://jsfiddle.net/ (1 time) (Note! This may be a new URL 👀)

[chrisdavidmills]

I have looked at each one of these, and they look good, very nice work @bsmth!

I will now merge this and try pulling it into my giant PR to see if any conflicts occur.

[bsmth]

I have looked at each one of these, and they look good, very nice work @bsmth!

I will now merge this and try pulling it into my giant PR to see if any conflicts occur.

Super, thank you very much!

[bsmth]

whoops, these two slipped in (broken on this branch, fixed on main), I'll correct in my next PR.

[bsmth]

Fixed in 9aad0db