成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

頁面布局 - flex彈性布局

liaosilzu2007 / 3541人閱讀

摘要：伸縮項(xiàng)，例如給子容器添加一個(gè)所有子容器的默認(rèn)都為，我們給第一個(gè)容器設(shè)置為時(shí)會(huì)產(chǎn)生類似于排序的效果伸縮容器

flex彈性布局

html：



    
        
        
        
        
    
    
        

            0

            
1

            
2

            
3

            
4

            
5

            
6

            
7

            
8

步驟一：先給父級容器設(shè)置 display: flex;，代表采用 flex 彈性布局
步驟二：設(shè)置主軸方向
①flex-direction: row；（默認(rèn)參數(shù)）主軸方向水平向右，結(jié)果如圖：


②flex-direction: row-reverse;（可選參數(shù)）主軸方向水平向左，結(jié)果如圖：


③flex-direction: column;（可選參數(shù)）主軸方向垂直向下，結(jié)果自行腦補(bǔ)（主要是太長了/偷笑）
④flex-direction: column-reverse;（可選參數(shù)）主軸方向垂直向上，同理
步驟三：設(shè)置側(cè)軸方向
①flex-wrap: wrap;默認(rèn)側(cè)軸方向與主軸垂直方向向下或者右，結(jié)果如圖：


②flex-wrap: wrap-reverse;可選側(cè)軸方向與主軸垂直方向向上或者左,結(jié)果腦補(bǔ)
注意：側(cè)軸的方向是隨主軸的變化的，主軸于側(cè)軸總是垂直，兩軸的方向默認(rèn)向右、下
其他屬性設(shè)置：
flex-flow: 是這兩個(gè)屬性的簡寫，雙參數(shù)時(shí)是 主軸方向+側(cè)軸方向，兩個(gè)參數(shù)空格隔開；單參數(shù)時(shí)是主軸方向。
order:number 伸縮項(xiàng)，例如給子容器添加一個(gè)order：1,所有子容器的默認(rèn)order都為0，我們給第一個(gè)容器order設(shè)置為1時(shí)會(huì)產(chǎn)生類似于排序的效果


justify-content:flex-start(default)||flex-end||center||space-between||space-around 伸縮容器

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114026.html

相關(guān)文章

  • 我所知道的flex布局 —— 上篇

    摘要：布局也經(jīng)歷了一段演變歷史。不同于將要出現(xiàn)的網(wǎng)格布局針對目標(biāo)為大比例布局，彈性盒布局更適用于應(yīng)用組件和小比例布局。常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而布局是基于流。 前言 你還在用display+position+float來進(jìn)行css布局嗎？有沒有覺得用傳統(tǒng)的這種布局方法來實(shí)現(xiàn)特殊布局特別麻煩困難，例如：垂直居中。今天來記錄一下自己對flex布局的了解（雖然不算神馬新東西了都可以說是舊東西...

    andycall 評論0 收藏0

  • 頁面布局 - flex彈性布局

    摘要：伸縮項(xiàng)，例如給子容器添加一個(gè)所有子容器的默認(rèn)都為，我們給第一個(gè)容器設(shè)置為時(shí)會(huì)產(chǎn)生類似于排序的效果伸縮容器 flex彈性布局 html： *{ margin: 0; padding: 0; ...

    LeoHsiun 評論0 收藏0

  • flex基礎(chǔ)布局詳解

    摘要：系統(tǒng)性的介紹關(guān)于布局，也作為自學(xué)的一篇文章基礎(chǔ)理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個(gè)布局的頁面所具有的元素可分為類。每行第一個(gè)元素與行首對齊，每行最后一個(gè)元素與行尾對齊。 flex-tutorials 系統(tǒng)性的介紹關(guān)于flex布局，也作為自學(xué)的一篇文章 flex基礎(chǔ)理念 使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...

    nemo 評論0 收藏0

  • flex基礎(chǔ)布局詳解

    摘要：系統(tǒng)性的介紹關(guān)于布局，也作為自學(xué)的一篇文章基礎(chǔ)理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個(gè)布局的頁面所具有的元素可分為類。每行第一個(gè)元素與行首對齊，每行最后一個(gè)元素與行尾對齊。 flex-tutorials 系統(tǒng)性的介紹關(guān)于flex布局，也作為自學(xué)的一篇文章 flex基礎(chǔ)理念 使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...

    luodongseu 評論0 收藏0

  • 彈性布局（display:flex;）屬性詳解

    摘要：設(shè)為布局以后，子元素的和屬性將失效。二基本概念采用布局的元素，稱為容器，簡稱容器。它的所有子元素自動(dòng)成為容器成員，稱為項(xiàng)目，簡稱項(xiàng)目。如果項(xiàng)目只有一根軸線，該屬性不起作用。四項(xiàng)目的屬性注項(xiàng)目屬性的全面理解較為復(fù)雜，可以參考文章 一、Flex布局-前言 Flex是Flexible Box的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性,旨在提供一個(gè)更有效地布局、對齊方式，并且能夠使容...

    wangshijun 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<