flex布局的使用

記錄一下flex常用的屬性

caniuse.com可以查詢css屬性的相容情況。

content-box: 總寬度 = width + padding2 + margin2 + border2

border-box: 總寬度 = width + margin2

父級盒子新增：display: flex;

使用flex布局之後，子元素不需要使用float;

justify-content: 子元素水平排列方式

align-items:      子元素垂直排列方式

align-content: 多行子元素垂直排列方式

flex-direction: 排列方式

flex-wrap:      子元素是否在一行顯示

flex-flow:      flex-direction flex-wrap 簡寫

flex:      子元素寬度係數

flex-grow:      子元素放大比例

align-self:      子元素垂直排列

order:      子元素順序

flex布局的使用

彈性容器 當一元素被設定display flex或display inline flex時，這個元素就是彈性容器，而彈性元素則是這個彈性容器中的直接子元素 lang en charset utf 8 name viewport content width device width,initial s...

flex布局 Flex布局

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

樣式布局flex的使用

說到頁面布局，無外乎水平垂直，先說說水平，最開始使用最多的是float屬性，但是它有後遺症，塌陷呀清除呀，最後放棄轉戰flex。需要謹記的是，flex是設定在需要生效的元素的父元素上面的。display flex flex direction row column 其中row為水平布局，column...