記錄一下flex常用的屬性
caniuse.com可以查詢css屬性的相容情況。
content-box: 總寬度 = width + padding2 + margin2 + border2border-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...