菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 李扬敏-20221025-flex布局 [打印本页]

作者: 王源的李可爱 时间: 2022-10-26 00:20
标题: 李扬敏-20221025-flex布局
一。今日所学内容
1.传统布局和flex布局的对比
传统布局：
兼容性好、布局繁琐、局限性（不能在移动端进行很好的布局）
Flex布局：
操作方便，布局简单，移动端应用广泛
PC端有一定的兼容问题，但是目前大部分PC端浏览器也是支持flex布局的
IE11以下不支持flex
ps：如果是PC端页面布局，最好是采用传统方式
如果是移动端或者不考虑PC端兼容性的，都可以采用flex进行布局
2.Flex布局原理
flex意思是弹性布局，任何一个盒子都可以指定为flex
当我们给父级盒子指定了flex布局后，子元素里面的float、clear和vertical-align属性都将失效。
采用Flex布局的元素，称为Flex容器（flex container）简称“容器”，它的所有的子元素自动成为容器成员，叫做Flex项目（flex item），简称“项目”。
3.Flex布局父项常见属性
flex-direction：设置主轴的方向
justify-content:设置主轴上的子元素的排列方式
flex-wrap：设置子元素是否换行
align-items：设置侧轴上的子元素的排列方式（单行）
align-content:设置侧轴上的子元素的排列方式（多行）
align-items和align-content的区别
align-items适用于单行情况下，只有上对齐，下对齐，居中和拉伸
align-content适用于多行的情况下（单行无效），可以设置上对齐、下对齐、居中、拉伸以及平分剩余等属性
单行找align-items
多行找align-content
4.flex-flow复合属性
是flex-direction和flex-wrap的复合属性
例：可以同时设置主轴方向和是否换行
image
5.Flex布局子项常见属性
align-self: 控制子项自己在侧轴上的排列方式
默认值是auto，表示继承父元素的algin-items属性，如果自己有align-self，就用自己的属性
属性值：
flex-strat：从头开始
flex-end：从尾部开始
center：居中显示
stretch：拉伸
6.order属性定义项目的排列顺序
数值越小排位越靠前，默认为0
注意点：不要和z-index混淆

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)