亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解CSS3彈性伸縮盒

  發(fā)布時間：2020-09-21 16:51:17   作者：Mount_chan   我要評論
這篇文章主要介紹了CSS3彈性伸縮盒的相關資料，幫助大家更好的理解和學習CSS3，感興趣的朋友可以了解下。

用途

  • 彈性盒子對于前端web網(wǎng)頁布局來說，有著舉足輕重的作用，移動端也是如此。掌握了彈性盒子用法，對于目前編寫自適應頁面很重要。掌握這種布局規(guī)則，是一項必備技能。
     

彈性伸縮盒模型說明

  • 主軸（main axis） 是沿著 flex 元素放置的方向延伸的軸（比如頁面上的橫向的行、縱向的列）。該軸的開始和結束被稱為 main start 和 main end**。
  • 交叉軸（cross axis） 是垂直于 flex 元素放置方向的軸。該軸的開始和結束被稱為 cross start 和 cross end**。
  • 設置了 display: flex 的父元素（在本例中是 <section> ）被稱之為 *flex 容器（flex container）。
  • 在 flex 容器中表現(xiàn)為柔性的盒子的元素被稱之為 flex 項 （ flex item ）
     

常用的屬性

flex-direction（指定彈性容器中子元素排列方式）

   row 默認值。元素將水平顯示，正如一個行一樣。
   row-reverse 以相反的順序。
   column 元素將垂直顯示，正如一個列一樣。
   column-reverse 與 column 相同，但是以相反的順序。

flex-wrap （屬性規(guī)定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。）

  nowrap默認值。規(guī)定元素不拆行或不拆列。
  wrap規(guī)定元素在必要的時候拆行或拆列。
  wrap-reverse規(guī)定元素在必要的時候拆行或拆列，但是以相反的順  序。

align-items 屬性定義flex子項在flex容器的當前行縱軸方向上的對齊方式，就是規(guī)定上下排行的樣式。

   stretch 默認值。項目被拉伸以適應容器。
   center 項目位于容器的中心。
   flex-start 項目位于容器的開頭。
   flex-end 項目位于容器的結尾。
   baseline 項目位于容器的基線上。

justify-content 用于設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。

  flex-start 項目位于容器的開頭。
  flex-end 項目位于容器的結尾。
  center 項目位于容器的中心。
  space-between 項目位于各行之間留有空白的容器內(nèi)。
  space-around 項目位于各行之前、之間、之后都留有空白的容器內(nèi)。

彈性子元素屬性

1.order屬性

.flex-container .flex-item { order: <integer>; }

<integer>：用整數(shù)值來定義排列順序，數(shù)值小的排在前面?？梢詾樨撝?，默認為0。

2.align-self設置或檢索彈性盒子元素自身在側軸（縱軸）方向上的對齊方式。(跟那個align-items類似)

以上就是詳解CSS3彈性伸縮盒的詳細內(nèi)容，更多關于CSS3彈性伸縮盒的資料請關注腳本之家其它相關文章！

相關文章

  • CSS3 最強二維布局系統(tǒng)之Grid 網(wǎng)格布局

    CS3的Grid網(wǎng)格布局是目前最強的二維布局系統(tǒng),可以同時對列和行進行處理,將網(wǎng)頁劃分成一個個網(wǎng)格,可以任意組合不同的網(wǎng)格,做出各種各樣的布局，本文介紹CSS3 最強二維布局系
    2025-02-27

  • 如何使用CSS3實現(xiàn)波浪式圖片墻

    本文介紹了如何使用CSS3的transform屬性和動畫技巧實現(xiàn)波浪式圖片墻,通過設置圖片的垂直偏移量,并使用動畫使其周期性地改變位置,可以創(chuàng)建出動態(tài)且具有波浪效果的圖片墻,同
    2025-02-27

  • CSS3模擬實現(xiàn)一個雷達探測掃描動畫特效(最新推薦)

    文章介紹了如何使用CSS3實現(xiàn)一個雷達探測掃描的效果,包括夜色背景、蜘蛛網(wǎng)盤、掃描體的轉(zhuǎn)動效果、尾巴陰影以及被掃描到的光點,通過HTML和CSS的配合,實現(xiàn)了豐富的動畫效果,
    2025-02-21

  • css3 display:flex 彈性盒模型的使用方法

    CSS3的Flexbox是一種強大的布局模式,通過設置display:flex可以輕松實現(xiàn)對齊、排列和分布網(wǎng)頁元素,它解決了傳統(tǒng)布局方法中的對齊、間距分配和自適應布局等問題,接下來通過本
    2025-02-19

  • css3 實現(xiàn)icon刷新轉(zhuǎn)動效果

    本文給大家介紹css3 實現(xiàn)icon刷新轉(zhuǎn)動效果，文章開頭給大家介紹了webkit-transform、animation、@keyframes這三個屬性，結合實例代碼給大家介紹的非常詳細，感興趣的朋友一
    2025-02-19

  • CSS3動態(tài)效果之過渡屬性(最新推薦)

    CSS3過渡屬性用于實現(xiàn)元素從一種樣式平滑過渡到另一種樣式,通過設置transition-property過渡屬性、transition-duration過渡時長transition-timing-function過渡函數(shù)和trans
    2025-02-19

  • CSS3實現(xiàn)動態(tài)旋轉(zhuǎn)加載樣式的示例代碼

    本文介紹了如何使用CSS3創(chuàng)建一個簡單的動態(tài)旋轉(zhuǎn)加載樣式,通過定義一個帶有類名“l(fā)oader”的HTML元素,并使用CSS樣式和@keyframes規(guī)則來實現(xiàn)旋轉(zhuǎn)動畫,你可以根據(jù)需要調(diào)整樣式
    2025-02-19

  • 使用CSS3實現(xiàn)平滑的過渡動畫效果(實例代碼)

    這篇文章主要介紹了如何使用CSS3的transition屬性實現(xiàn)平滑的過渡動畫，本文通過實例代碼給大家介紹的非常詳細，感興趣的朋友一起看看吧
    2025-02-13

  • CSS3中使用flex和grid實現(xiàn)等高元素布局的示例代碼

    本文介紹了使用CSS3中的Flexbox和Grid布局實現(xiàn)等高元素布局的方法,通過簡單的兩列實現(xiàn)、每行放置3列以及全部代碼的展示,展示了這兩種布局方式的實現(xiàn)細節(jié)和效果，感興趣的朋
    2025-02-11

  • 使用CSS3和SVG創(chuàng)建圓形進度條動畫效果

    CSS3和SVG的結合使用為網(wǎng)頁設計帶來了創(chuàng)新的動態(tài)視覺效果,本文通過一個圓形進度條的動畫特效示例,展示了如何利用CSS3的動畫功能和SVG的矢量圖形能力來創(chuàng)建豐富的用戶交互體
    2024-10-24

最新評論