Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

Flex Layout Styles You'll layout the golf course pages using a flex layout. Go to the Flex Layout Styles section and create a style rule

image text in transcribed

Flex Layout Styles You'll layout the golf course pages using a flex layout. Go to the Flex Layout Styles section and create a style rule for the page body that displays the body as a flexbox oriented in the row direction with wrapping. As always, include the WebKit browser extension in all of your flex styles Navigation List Two of the child elements of the page body are a navigation list with the ID #hole-list and an article element containing information about the current hole. Add a style rule that sets the flex growth, shrink, and basis size values of the hole_list navigation list to 1, 3, and 140 pixels. Article Styles Add a style rule that sets the flex growth, shrink, and basis size values of the article element to 3, 1, and 341 pixels. The article element contains statistics and a summary about the current hole. Michael also wants this element to be treated as a flexbox. Add to the style rule for the article element styles that display the element as a flexbox oriented in the row direction with wrapping Nested Section Elements The two items within the article element area section element with the ID #stats and a section element with the ID #sunnary . Create a style rule for the stats section that sets its flex growth, shrink, and basis values to 1, 4, and 120 pixels. Create a style rule for the summary section that sets its flex growth, shrink, and basis values to 4, 1, and 361 pixels respectively Aside Styles The aside element contains an advertisement for other services offered by the Willet Creek Resort. Add a style rule that displays this element as a flexbox in row orientation with wrapping. Information about individual services are saved in a div element within the aside element. Michael wants these div elements to be laid out with equal flex sizes. Create a style rule for every div element within the aside element that sets the flex growth and shrink values to 1 and the basis value to 180 pixels Flex Layout Styles You'll layout the golf course pages using a flex layout. Go to the Flex Layout Styles section and create a style rule for the page body that displays the body as a flexbox oriented in the row direction with wrapping. As always, include the WebKit browser extension in all of your flex styles Navigation List Two of the child elements of the page body are a navigation list with the ID #hole-list and an article element containing information about the current hole. Add a style rule that sets the flex growth, shrink, and basis size values of the hole_list navigation list to 1, 3, and 140 pixels. Article Styles Add a style rule that sets the flex growth, shrink, and basis size values of the article element to 3, 1, and 341 pixels. The article element contains statistics and a summary about the current hole. Michael also wants this element to be treated as a flexbox. Add to the style rule for the article element styles that display the element as a flexbox oriented in the row direction with wrapping Nested Section Elements The two items within the article element area section element with the ID #stats and a section element with the ID #sunnary . Create a style rule for the stats section that sets its flex growth, shrink, and basis values to 1, 4, and 120 pixels. Create a style rule for the summary section that sets its flex growth, shrink, and basis values to 4, 1, and 361 pixels respectively Aside Styles The aside element contains an advertisement for other services offered by the Willet Creek Resort. Add a style rule that displays this element as a flexbox in row orientation with wrapping. Information about individual services are saved in a div element within the aside element. Michael wants these div elements to be laid out with equal flex sizes. Create a style rule for every div element within the aside element that sets the flex growth and shrink values to 1 and the basis value to 180 pixels

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access with AI-Powered Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Students also viewed these Databases questions