可解構的自適應布局
flex: 0 1
這種布局經常出現在電商**：
在 viewport 足夠的時候，三個 box 固定寬度橫放
在 viewport 不夠的時候（寬度在移動上面），寬度仍然固定，但是自動解構，不在同一水平面上
當我們設定flex: 1 1 150px;時候：
經典側邊欄
grid-template-columns: minmax(, ) ...
grid-template-columns: minmax(, ) ...
同樣使用grid布局，結合可以minmax( )實現彈性的，這在你要適應大螢幕的時候很有用）。minmax(, )就是字面意思。結合單位，非常優雅，避免了數學計算寬度等不靈活的手段（如我們設定 gap 的時候）。
經典聖杯布局（古典聖杯布局）
grid-template: auto 1fr auto / auto 1fr auto
我們可以輕鬆地使用網格布局來實現聖杯布局，並且是彈性的。
ram技巧grid-template-columns: repeat(auto-fit, minmax(, 1fr))
這在彈性布局/ box這種非常有用（行可以排放的卡片數量自動適應）
.ex7 .parent
123
4 其效果是如果確保能夠滿足多個盒的最小寬度（例如上面的150px），則自動彈性適應放置多行。
當前寬度是160px（不考慮gap），那麼上面四個box的寬度會適應為160px，並且分為4行
當前寬度是310px（不考慮間隙），上面四個box分段兩行，兩個box平分寬度
當滿足滿足一行放下3個box時，第三個box自動到第一行
當滿足滿足一行放下4個box時，第四個box自動到第一行
如果將auto-fit對劃線auto-fill：
卡片彈性適應性
justify-content: space-between，結合grid和flex實現布局。
無論是寬度或高度的收縮還是延展，都可以完整的展現卡的布局。
使用 clamp 實現 fluid typography
clamp(, , )最新使用的clamp( )方法可以一行實現流體排版。提高ux，非常適合包含閱讀內容的卡，因為我們不希望一行字太短或太長。
descriptive text. lorem ipsum dolor sit, amet consectetur adipisicing elit. sed est error repellat veritatis.
.ex9 .parent.ex9 .card.ex9 .visual 自適應布局
請你說一說你知道的所有web布局方式？1.浮動 float left right 2.inline block display inline block 行內塊級 3.flexible box 彈性盒子 display flex 4.grid display grid 5.絕對 相對布局 posit...
CSS布局 自適應布局
網易雲課堂學習筆記二 自適應布局 1.float absolute margin left right2.float overflow left right 產生bfc3.table left,right 預設均分 left margin失效 4.flex left right 由 定寬 自適應 類...
右邊自適應 左右布局 css左右自適應布局
如果有這麼乙個表單需求，前面是乙個名稱，中間是乙個表單，右側是乙個按鈕或者乙個字串。需要自適應布局，名稱為固定長度，右側也是固定，中間部分自適應整個width。先來看看html標籤1 6 年齡歲 首先，我想到的有這麼幾種display，乙個是inline block。於是css就變成這樣1.name...