flex佈局相關屬性記錄
阿新 • • 發佈:2020-12-09
<template> <div class="about"> <h3>flex相關的屬性</h3> <div class="parent"> <div class="son1"></div> <div class="son2"></div> <div class="son3"></div> <div class="son4"></div> </div> <div class="parent1"> <div class="son1"></div> <div class="son2"></div> <div class="son3"></div> </div> <div class="parent3"> <div class="son1"></div> <div class="son2"></div> <div class="son3"></div> </div> </div> </template> <script> export default { } </script> <style lang="scss" scoped> /* 父元素的屬性: flex: grow; 如果有多餘的空間,會按照比例分配剩餘的空間 flex-direction column; 主軸對齊方式 如果子元素沒有設定高度的話,flex-grow: 會等比例分配高度 flex-direction row-reverse 水平從右往左 flex-direction column-reverse 垂直從下到上 flex-wrap: nowrap 預設不換行 如果超過父元素的寬度,子元素的寬度會被壓縮 flex-wrap: wrap;換行 換行如果父元素設定了高度 子元素沒有設定高度 那麼高度也會被兩行的子元素等分 flex-flow: 是flex-direction 和 flex-wrap 屬性的簡寫 預設是 row nowrap justify-content: flex-start 預設值左對齊; flex-end 右對齊; center 居中對齊; space-between 空白在盒子之間顯示; space-around 空白環繞盒子顯示 align-items: flex-start 預設值 側軸開始的方向對齊; flex-end 側軸結束的方向對齊; center 居中對齊; baseline 如果彈性盒子元素的主軸對齊方式和側軸一樣 則該值與flex-start等效,其他情況下,基線對齊 stretch 各行將會伸展以佔用剩餘的空間,剩餘空間被所有行平分 注意:align-items 如果是stretch 會自動拉伸至和父元素的高度一致 align-content(多行側軸對齊方式) flex容器中的子項不止一行時該屬性才有效果 align-content: flex-start 側軸開始的方向對齊; flex-end 側軸結束的方向對齊; center 居中對齊; space-between 空白在盒子之間顯示; space-around 空白環繞盒子顯示;stretch 拉伸顯示 子元素的屬性: flex-grow: 父元素的寬度大於子元素的寬度時,如果有剩餘的空間,按照擴充套件比例來分配 預設值是0 表示該元素不索取父元素的剩餘空間,如果值大於0,表示索取,值越大,索取的越多 flex-shrink 父元素的寬度小於子元素的寬度之和時,flex-shrink會按照一定的比例進行收縮 預設值是1 值越大,減小的越厲害。如果值是0,表示不減少 flex-basis 設定或檢索彈性盒子伸縮基準值,如果所有子元素的基準值之和大於剩餘空間,則會根據每項設定的基準值,按比例伸縮剩餘空間 設定元素的寬度,如果元素上同時設定了width 和 flex-basis, 那麼width的值會被flex-basis覆蓋 flex: flex-grow, flex-shrink, flex-basis 的簡寫 預設值為 0 1 auto (備註: 後兩個屬性可選) flex-grow flex-shrink flex-basis 簡寫 flex: none === flex: 0 0 auto flex:auto === flex: 1 1 auto flex:1 === 等同於 flex: 1 1 auto; align-self: 設定或檢索彈性盒子子元素在側軸上的對齊方式,可以覆蓋父元素的align-items 取值和align-items一樣 align-items 是整體佈局 */ @import '../styles/index.scss'; .about { .parent { width: 300px; height: 200px; display: flex; // flex-direction: column-reverse; // flex-wrap: wrap; flex-flow: row wrap; // flex-direction flex-wrap justify-content: flex-end; // 右對齊 border: 1px solid #ccc; .son1 { width: 100px; background-color: purple; // flex-grow: 1; } .son2 { width: 100px; // flex-grow: 2; background-color: skyblue; } // .son3 { // width: 100px; // background-color: lime; // } // .son4 { // width: 100px; // background-color: hotpink; // } } .parent1 { margin-top: 100px; width: 375px; height: 200px; border: 1px solid #ccc; display: flex; // justify-content: space-between; // 右對齊 flex-flow: row wrap; // align-items: stretch; // 側軸結束的方向對齊 align-content: space-between; .son1 { background-color: purple; width: 150px; height: 50px; } .son2 { background-color: skyblue; width: 150px; height: 50px; } .son3 { background-color: lime; width: 150px; height: 50px; } } .parent3 { width: 400px; height: 200px; border: 1px solid #ccc; margin: 50px auto; display: flex; // 300 + 200 - 400 = 100 300 - 100 * 【300 * 1 /( 300 * 1 + 200 * 2)】= 300 - 44.4 = 255.6 .son1 { flex-basis: 100px; background-color: blue; height: 50px; align-self: flex-start; // 子元素 側軸的開始位置對齊 // flex-grow: 1; // flex-shrink: 1; } // 200 - 100 * 【200 * 2 / (300 * 1 + 200 * 2)】 = 142.86 .son2 { flex-basis: 100px; background-color: green; height: 50px; align-self: center; // 側軸居中對齊 // flex-grow: 2; // flex-shrink: 2; // 縮小一倍 } .son3 { flex-basis: 100px; background-color: hotpink; height: 50px; align-self: flex-end; // 側軸的結束位置對齊 } } } </style>