2021.4.9 北京林业大学 web前端开发基础 CSS3 弹性盒子

弹性盒子flexbox 一维布局

（移动端优先）
垂直居中、间隙的平均分配、自动占据剩余空间
弹性容器—>弹性元素

一、弹性容器

1.display属性（父元素）
display:flex;
2.flex-direction属性—行布局
行为主轴，列为辅轴
flex-direction:row
flex-direction:reverse（反向）
列布局
列为主轴，行为辅轴
flex-direction:colom
flex-direction:reverse（）
3.flex-wrap属性（是否折行，默认不折行）
:nowrap 不折行，父元素不够宽子元素会变瘦
:wrap 折行，父元素不够宽子元素会变成多行
：wrap-reverse 反向折行
4.flex-flow属性
flex-flow: flex-direction属性 flex-wrap属性;
flex-flow: row wrap;
5.justify-content（元素在主轴上的对齐方式）
：flex-start（行：左对齐）
：center （行：居中对齐）
：flex-end（行：右对齐）
：space-between（行：两端对齐，左右元素贴紧边框）
：space-around（行：拉手对齐，元素左右距离相等，两元素间距为最左端元素与边框距离的二倍）
：space-evenly（行：平均分配 两元素间距和最左端元素与边框距离相等）
6.align-items（元素在辅轴上的对齐方式）
：flex-start（行：上对齐）
：center （行：居中对齐）
：flex-end（行：下对齐）
：stretch（行：去掉元素高度，所有子元素拉伸为父元素的高度）

弹性元素样式

1.flex-grow属性（元素被拉大的比例，按比例分配容器剩余空间）
默认值为0：元素不占用剩余空间
取值为n：元素占据剩余空间若干份中的n份
2.flex-shrink属性（元素被压缩的比例）
默认为1，表示弹性元素被等比例压缩
取值为0，表示不压缩
3.flex-basis属性（元素在主轴上的默认尺寸，优先级高于width属性）
4.flex属性
flex:fkex-grow flex-shrink flex-basis
5.order属性（子元素在弹性容器中的排列顺序，数值越小排名越靠前，默认值为0）
order:1
6.align-self属性（单个弹性元素在辅轴上的对齐方式，align-items是全部元素）
align-self: auto | flex-start | flex-end | center | baseline | stretch
7. align-content属性（设置多行元素在容器中的整体对齐方式，只有一行或者一列，该属性不起作用）
align-content:flex-start|flex-end|center|space-between|space-around|stretch;