html页面布局之flex弹性盒子

一、背景介绍

Flexbox 布局(FLexible Box)意在提供一个更为有效的方式来进行布局、对齐和分配一个容器内元素之间的空间，即使他们的大小是未知的或者动态的。

flex布局的主要思想是，让容器能够改变它的子元素的宽度/高度（甚至顺序），从而更好地填充可用的空间（主要是为了适应所有种类的设备和屏幕大小）。

最重要的，flexbox 布局是可以改变方向的。与之相对的是传统布局（block是垂直方向的从上到下，inline是水平方向的从左到右）。虽然他们在页面上表现良好，但是他们缺乏弹性（字面意义上的缺乏弹性）来适应大型的或者复杂的应用（尤其是遇到方向的改变、调整大小、伸展、收缩等等这些情况时）。

---

二、知识剖析

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross
                        start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

---

三、常见问题

元素的水平垂直居中

---

四、解决方案

1.传统方案

2.flex解决方案

---

五、编码实战

   
   
   
   
   


   

     
       
       
       
   

html{
    font-size: 62.5%;
}
body{
    margin: 0;
}
.box{
  width: 100%;
  height: 30rem;
  background: rgb(190, 189, 189);
  /* text-align: center;
  line-height: 30rem; */
  display:flex;
  /* justify-content: center; */
  align-items: center;
  /* justify-content: flex-start; */
  justify-content: flex-end;
  /* justify-content: space-between; */
  /* justify-content: space-around; */
  /* align-items:flex-start; */
  /* align-items: flex-end; */
}
.box1{  
    position: absolute;
    background: orange;
    padding: 5rem 5rem;
    /* text-align: center; */
    /* margin: auto 0 ; */
}
.box2{
    position: absolute;·
    margin: 0rem;
    background: orange;
    padding: 5rem 5rem;
}

六、拓展思考

flex布局在各浏览器下的兼容性

---

七、参考文献

参考一：
                    阮一峰
                


         参考二:
                    兼容性
              

---

八、更多讨论

https://www.jianshu.com/p/2dfa5bab1ef1

---

提问1：flex:1;是什么意思，有什么效果 

回答：flex：1代表一个页面的宽度比例，在不不确定元素的宽度值的时候会用到。

提问2：flex有什么缺点

回答：浏览器支持不全是最大缺点

提问3：flex里面的元素可以使用绝对定位吗

回答：可以使用绝对定位

感谢大家观看！

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

获得更多IT技能，请移步官网 点击链接直达：http://www.jnshu.com/login/1/17884272