移动端web开发（二）flex弹性布局
一、flex弹性布局
原理
为盒模型提供最大的灵活性。任何一个容器都可以指定为flex布局。采用flex布局的元素，成为flex容器，简称容器。他所有的子元素都自动成为容器成员，成为flex项目，简称项目
- 当我们为父盒子设置flex布局以后，子元素的float、clear和vertial-align属性将失效
- 伸缩布局 = 弹性布局 = flex布局
注意：是给父元素添加flex属性
二、 常见父项属性
- flex-direction：设置主轴方向
- justify-content：设置主轴上的子元素排列方式
- flex-wrap：设置子元素是否换行
- align-content：设置侧轴上子元素的排列方式（多行）
- align-items：设置侧轴上子元素的排列方式（单行）
- flex-flow：符合属性，相当于设置了flex-direction和flex-wrap
1、flex-direction 设置主轴方向
- 默认主轴方向就是x轴方向，水平向右
- 默认侧轴方向就是y轴方向，水平向下
2、 justify-content 设置主轴上的子元素排列方式
justify-content：定义了项目在主轴的对齐方式
注意：使用之前一定要确定好哪个是主轴
2.1 子元素垂直居中的方法
注意：写在父元素上
flex-direction:column; //主轴设为y轴
justify-content:center;
3、 flex-wrap 设置子元素是否换行（重要）
默认情况，项目都排在一条线上（轴线）。flex布局默认是不换行的
注意：如果一行装不开，则会压缩子元素的大小
4、align-items 设置侧轴上的子元素排列方式（单行）
该属性控制子项在**侧轴（默认y轴）**上的排列方式，在子项为单项时使用，多行时实现不了
实例：实现盒子水平垂直居中
/*默认主轴为x轴*/
justify-content:center;
/*侧轴居中*/
align-items:center;
5、 alilgn-content 设置侧轴上的子元素排列方式（多行）
设置子项在侧轴的排列方式，且只能用于子项出现换行的情况（多行)，在单行下是没有效果的，比单行多了space-between和space-around的情况
6、align-content 和 align-items区别
- align-items 用于单行，只有上对齐，下对齐，居中和拉伸
- align-content 用于换行（多行），可设置上对齐，下对齐，居中、拉伸以及平均分配剩余空间等
7、flex-flow 复合属性
flex-flow：row wrap;
三、 flex布局子项常见属性
- flex属性定义子项目占的份数
- align-self 控制子项自己在侧轴的排列方式
- order属性定义子项的排列顺序（前后顺序）
1、flex属性（重要）
flex属性定义子项目分配剩余空间，用flex来表示占多少份数
.item {
flex:<number>; /*默认为0*/
}
注意：是分配剩余空间
例子：
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2) {
flex: 1;
background-color: green;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: blue;
}
2、align-self 控制子项自己在侧轴的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。若没有父元素，则等同于stretch。
span:nth-child(2) {
align-self:flex-end;
}
3、order 属性定义项目的排列顺序
数值越小，排列越靠前，默认为0
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/150444.html
