移动开发flex布局

一、布局原理

• 当父元素设置flex布局后 ，默认是display:flex;，子元素的float,clear,vertical-align属性失效
• 设置flex的父元素，叫容器；里面的子盒子，简称项目

二、flex布局父项属性

父元素属性值	描述
flex-direction	设置主轴方向
justify-content	主轴上子元素的排列方式
flex-wrap	设置子元素是否换行
align-content	侧轴上子元素的排列方式（多行）
align-items	侧轴上子元素的排列方式（单行）
flex-flow	复合属性；相当于同时设置了flex-direction和flex-wrap

2.1、flex-directoin设置主轴方向

• 默认左右是主轴
• 主轴侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的是侧轴

1.默认从左到右： flex-direction:row
2.从右到左： flex-direction:row-reverse
3.从上到下： flex-diirection:column
4.从下到上： flex-direction:column-reverse

2.2、justify-content主轴上子元素的排列方式

• 一定要先确定好，主轴是哪个；默认是justify-content:flex-start

父元素属性值	描述
flex-start	默认从头部开始，若主轴是X轴，从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（使一个盒子水平居中）
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间

2.3、flex-wrap设置子元素受否换行

• flex布局中，默认的子元素不换行，如果装不开，会缩小子盒子的宽度
• 默认是不换行的，需要设置flex-wrap:wrap(默认是nowrap)

2.4、align-content设置侧轴上的子元素的排列方式（多行）

• 单行时，不能用align-content这个属性

属性值	描述
flex-start	从侧轴的头部排序（默认）
flex-end	从侧轴的尾部开始排序
center	侧轴中间显示
space-around	在侧轴平分剩余空间
space-between	在侧轴先两边贴边，再平分剩余空间
stretch	子元素高度平分父元素高度

2.5、flex-items设置侧轴上的子元素排列方式（单行）

与align-content相比，这个属性更加分散，flex items：center与align-content：space-round实现的效果一样

属性值	描述
flex-start	从上到下
flex-end	从下到上
center	垂直居中
stretch	拉伸（默认值）子盒子不要给高 度，那子盒子的高度会和父盒子的高度一样高

三、flex布局子项属性

属性值	描述
flex	子项目分配剩余的空间
align-self	单个盒子排列与其他盒子不同
order	项目盒子的排列顺序
flex-grow	使项目放大
flex-shrink	使项目缩小

• 前提一定在父盒子里加display:flex;
• flex属性定义子项目分配剩余空间，div{flex:1}/(默认是0)
• 加入flex，可以实现自适应

 <style>
        section {
   
            width: 300px;
            height: 150px;
            background-color: pink;
            margin: auto;
            display: flex;
        }
        
        div {
   
            flex: 1;
        }
        
        section div:nth-child(