盒子模型 box-sizing:
content-box 平時普通盒子模型 ：padding、border 盒子會變大 （向外擴充套件）
border-box 盒子模型 ：padding、border 盒子不會變大 （向內擴充套件）
calc(公式) 注意: + - * / 屬性相容查詢
calc(100px-20px) ×
calc(100px - 20px) √
父級屬性： display:flex
justify-content: 子元素水平排列方式
center 居中
space-between 兩端對齊
space-around 子元素拉手分布
flex-start 居左
flex-end 居右
align-items： 單行子元素垂直排列
align-content： 多行子元素垂直排列
center:居中
flex-end：底部
flex-start：開始
flex-direction：
row：橫向排列
row-reverse：橫向翻過排列
column:縱向排列
column-reverse：縱向翻過排列
flex-flow：flex-wrap:nowrap（預設 不換行） | wrap（換行，第一行在上方） | wrap-reverse（wrap-reverse：換行，第一行在下方）;
子級屬性：
flex：1 1指比例 先去除固定寬度
align-self： 用來覆蓋父級 align-items 垂直排列
flex-grow：1 定義子元素放大比例
order：規定子元素順序排列 數值越小，越靠前，預設值為0
flex彈性盒子
垂直居中 傳統 絕對定位 flex flexible box 彈性盒子。可以輕鬆控制元素的排列，對齊和順序。宣告定義 使用display flex或display inline flex 宣告乙個容器為彈性盒子。這個容器中的子元素們，會遵循彈性布局。注 一般是使用display flex.inlin...
彈性盒子 flex
flex 彈性盒 伸縮盒 是css中的又一種布局手段，它主要用來代替浮動來完成頁面的布局 flex可以使元素具有彈性，讓元素可以跟隨頁面的大小的改變而改變 要使用彈性盒，必須先將乙個元素設定為彈性容器 我們通過display來設定彈性容器 思維導圖 flex direction 指定容器中彈性元素的...
flex彈性盒子
1.設為flex布局之後，子元素的float，clear和vertical align屬性都講失效 2.採用flex布局的元素，稱為flex容器 flex container 所有的子元素成為容器成員，稱為flex專案 flex item 3.容器預設存在兩根軸 水平的主軸和垂直的交叉軸 4.主軸的...