当你的才华还不足以支撑你的野心时,就应该静下心来去学习!
弹性盒子常用属性:display: flex;开启弹性盒模式 --1、flex-direction 方向 :纵向 竖向 主轴和侧轴 -row 从左往右排列 -row-reverse 从右往左排列 -column 从上往下排列 -column-reverse 从下往上排列 --2、flex-wrap 是否换行 -nowrap 默认值的 不换行 -wrap 向下或者向右换行 -wrap-reverse 向上或者向左换行 【方向和换行的简写属性】 flex-flow: row wrap; --3、flex-grow/shrink 放大与缩小 -数值型:表示比例系数 放大时:值越大,分匹配的长度越大 默认值为0 缩小时:值越大,缩小的越厉害 默认值为1 --4、主轴如何留白: justify-content 水平方向如何留白 -flex-start 左对齐 -flex-end 右对齐 -center 主轴方向,水平居中 -space-between: 两端对齐 -space-evenly 平均分配在元素之间(相邻位置不会叠加) -space-around 分配元素周围,(元素的相邻位置会叠加) --5、侧轴如何留白 如果子元素不设置宽高,那么默认拉伸最大化,如果设置宽高,那么拉伸属性失效 align-content:【*】把每一行看做成一个元素 在父元素角度上,摆放每个元素,【父元素垂直方向如何留白】 -属性和justify-content一样,更加灵活 -相比align-items, align-content的对齐方式更多,更灵活 -align-content 常用来对多行操作,可以完全替代 align-items -align-items 常用来对单行操作 -stretch 拉伸,在行内高度最大化 align-items:【*】把每一行看做成一个元素 设置该元素内部内容的垂直方向的对齐方式 【每一行垂直方向如何留白】 -flex-start 在行内上对其 (默认值) -center 居中 -flex-end 在行内下对齐 -baseline 基线对齐 (不常用) align-self:对行内的某个子元素 单独设置对齐方式 (更体现出灵活性) -flex-start 在行内上对其 -center 居中 -flex-end 下对齐
=================================结尾=============================
自己刚学完弹性盒的基本知识点,整理和总结的笔记。