黑马程序员技术交流社区
标题:
移动端第五天学了flex布局
[打印本页]
作者:
枫叶飘呀飘
时间:
2019-4-11 13:56
标题:
移动端第五天学了flex布局
flex布局
1)作用:
通过给
父盒子
添加
display:flex;
属性,来
控制
子盒子
的
位置
和
排列方式
父元素:容器。
子元素:项目。
tips:父盒子添加flex布局后,子元素的float、clear和vertical-align属性失效
2)父项属性
①flex-direction
:row(默认) | row-reverse |
column
| column-reverse
作用:
决定主轴的方向(排列方向)
默认2个轴(水平、垂直方向)
元素跟着
主轴
来排列
②justify-content
:flex-start(默认) | flex-end |
center
| space-around | space-between
作用:项目在主轴上的对齐方式
tips:使用之前一定要确定主轴在哪个方向
③flex-wrap
: no-wrap(默认) | wrap
作用:主轴排列不下时子元素是否换行
默认的子元素不换行,如果装不开,会缩小元素的宽度,放到父元素里面
④align-items:
center
| stretch(拉伸) | flex-start | flex-end
作用:设置
单行
子元素在侧轴的排列方式
⑤align-content
: 值与justify-content一样
作用:设置
多行
子元素在侧轴的排列方式
⑥flex-flow
: column wrap
作用:flex-direction和flex-wrap的复合属性。
3)子项属性
控制子元素本身的缩放
① ※flex:份数或 百分比(相对父元素)
作用:放大当前元素,设置当前元素占据
剩余空间
的比例值
计算:
当前父元素中,所有兄弟元素flex值得和(即总份数)
如果没有设置flex,则默认为0(即子元素不会去占据剩余空间)
控制子元素的排列方式
② align-self:
作用:控制某一个子项在侧轴的排列方式
③ order:
作用:数值越小,排列越靠前,默认值为0
H5携程网
文字阴影:text-shadow
背景渐变:background: -webkit-linear-gradient(方位名词,颜色1,颜色2)
背景渐变必须添加浏览器
私有前缀
起始方向可以是: 方位名词 或者 度数 , 如果省略默认就是 top
、
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2