行銷網站常見的版面配置就是這類布局，可能會有一排三個項目，通常包含圖片、標題和一些文字，說明產品的部分功能。在較小的螢幕上，您會希望這些元素能整齊地堆疊，並隨著螢幕尺寸的增加而展開。 使用 flexbox 實現此效果後，您就不必在螢幕大小改變時使用媒體查詢調整這些元素的位置。 flex 快速鍵代表： flex: <flex-grow> <flex-shrink> <flex-basis> 。 如果您希望方塊在換行時延伸並填滿空白空間，請將

• CSS
• HTML

使用 aspect-ratio 屬性時，當您調整資訊卡大小時，綠色視覺區塊會維持 16 x 9 的顯示比例。我們會使用 aspect-ratio: 16 / 9 的顯示比例。 如要在不使用此屬性的情況下維持 16 x 9 的顯示比例，您必須使用 padding-top 駭客程式 ，並為其提供 56.25% 的邊框，以設定頂部與寬度的比例。我們很快就會推出這項屬性，以避免使用者惡意修改內容，並避免需要計算百分比。您可以使用 1 / 1 比例製作正方形圖片、使用 2 / 1 比例製作 2 比 1

• CSS
• HTML

This demo uses container queries to create an intrinsic, responsive card. The card goes from a single-column layout at more narrow sizes to a two-column layout when it is at wider sizes. To create the container, first set containment on the parent:

• HTML
• CSS

A centering technique that only aligns content and doesn't change their size during the process. See the full article for many more details about this technique and when it's efficient. Full article · Video on YouTube · Source on Github

• CSS
• HTML

A centering technique where an element pushes equally from all edges of a flex container. Best for quick centering for single items only. See the full article for many more details about this technique and when it's efficient. Full article · Video on

• HTML
• CSS

Unlike the deconstructed pancake, this example does not wrap its children when the screen size changes. Commonly referred to as a sticky footer, this layout is used for both websites and apps, across mobile applications (the footer is commonly a

• HTML
• CSS

In this demo, you are setting the width using clamp() like so: width: clamp(<min>, <actual>, <max>). This sets an absolute min and max size, and an actual size. With values, that can look like: The minimum size here is 23ch or 23

• CSS
• HTML

For this seventh example, combine some of the concepts you've already learned about to create a responsive layout with automatically-placed and flexible children. Pretty neat. The key terms to remember here are repeat, auto-(fit|fill), and minmax(),

• CSS
• HTML

For this classic holy grail layout, there is a header, footer, left sidebar, right sidebar, and main content. It's similar to the previous layout, but now with sidebars! To write this entire grid using a single line of code, use the grid-template

• HTML
• CSS

A centering technique that puts the content in the center via equal padding around all its sides. See the full article for many more details about this technique and when it's efficient. Full article · Video on YouTube · Source on Github

• CSS
• HTML

The main point demonstrated here is the use of justify-content: space-between, which places the first and last child elements at the edges of their bounding box, with the remaining space evenly distributed between the elements. For these cards, they

• HTML
• CSS

Use place-items: center to center an element within its parent. This enables the content to be perfectly centered within the parent, regardless of intrinsic size.

• CSS
• HTML

This demo takes advantage of the minmax() function for grid layouts. In the demo this function is used to set the minimum sidebar size to 100px, but on larger screens, letting that stretch out to 25%. The sidebar will always take up 25% of its

• CSS
• HTML

A centering technique for overlaying other content. See the full article for many more details about this technique and when it's efficient. Full article · Video on YouTube · Source on Github

• HTML
• CSS

A centering technique that is only a few lines of CSS, works great for many elements, but has the side effect of making children match the width of the widest element. See the full article for many more details about this technique and when it's

• CSS
• HTML

Another classic: the 12-span grid. You can quickly write grids in CSS with the repeat() function. Using: repeat(12, 1fr); for the grid template columns gives you 12 columns each of 1fr. Now you have a 12 column track grid, you can place child

• HTML
• CSS