flex布局學習（三）

2022-08-24 07:03:13 字數 2604 閱讀 6738

幾個重要的概念 主軸、主軸開始點、主軸結束點、 交叉軸 

容器（display:flex的元素上）屬性

doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>


title


>


<


style 


type


="text/css"


>


.container 


.item 


.container2 


.item2 


.container3 


.item3 


style


>


head


>


<


body


>


<


div 


class


="container"


>


<


div 


class


="item"


>


預設主軸方向row 其他的有row-reverse colum colum-reverse


div>


<


div 


class


="item"


>


預設不換行


div>


<


div 


class


="item"


>


可以在container 上設定換行


div>


<


div 


class


="item"


>


4 


div>


<


div 


class


="item"


>


5 


div>


<


div 


class


="item"


>


6 


div>


div>


<


div 


class


="container2"


>


<


div 


class


="item2"


>


換行 和 主軸方向有關係


div>


<


div 


class


="item2"


>


預設時row


div>


<


div 


class


="item2"


>


3 


div>


<


div 


class


="item2"


>


4 


div>


<


div 


class


="item2"


>


5 


div>


<


div 


class


="item2"


>


6寬度不夠 換行到第一行


div>


div>


<


div 


class


="container3"


>


<


div 


class


="item3"


>


1 


div>


<


div 


class


="item3"


>


2 


div>


<


div 


class


="item3"


>


3 


div>


<


div 


class


="item3"


>


4 


div>


<


div 


class


="item3"


>


5 


div>


<


div 


class


="item3"


>


6 


div>


div>


body


>


html


>
效果

flex布局學習

內容 flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。設為 flex 布局以後，子元素的float clear和vertical align屬性將失效 採用 flex 布局的元素，稱為 flex 容器 flex...

flex布局學習

flex flexible box 是一種彈性布局，用於盒狀模型 任何一種容器都可以指定為flex布局 box注意 行內元素使用display flex 會變成塊級元素 行內元素可以使用inline flex進行flex布局 box注意 設定為flex布局之後，子元素的float clear和ver...

flex布局 Flex布局

摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...