flex布局使用

什么是flex布局

• flex是flexible Box的缩写，意味“弹性盒子”，用来为盒子状模型提供最大的灵活性
• 任何一个盒子都可以指定为flex布局 .box{ display:flex }
• 行内元素也可以使用flex布局 .box{ dispaly:inline-flex }
• Webkit内核的浏览器，必须加上-webkit前缀

•    display: -webkit-flex; /* Safari */
     display: flex;
  

• 当我们为父盒子设置了flex布局之后，子元素的float，clear和vertical-align就失效了

传统布局和flex布局的差别

• pc端的兼容较差，IE11或者更低的版本，不支持或者仅部分支持
• 所以：
  • pc端页面布局，建议任然使用传统布局
  • 移动端或者不考录兼容性问题的PC端桌面布局，仍然使用flex弹性布局

flex布局初体验

• 首先，行内元素是不能设置宽高的，如span
• 但是，我们一旦给了父级元素设置了display：flex那行内元素也能设置宽高

•       div{
          display: flex;
           80%; 
          height: 300px;
          background-color: pink;
        }
        div span{
          margin-right: 10px;
          150px;
          height: 100px;
          background-color: blue;
        }
         <div>
          <span>1</span>
          <span>2</span>
          <span>3</span>
        </div>
  

flex布局原理

• 采用flex布局的元素，称为flex容器，他的所有子元素自动成为容器成员，成为flex项目 （flex item）
• 子容器可以横向排列，也可以纵向排列
• 总结就是：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex布局父项常见属性

1. flex-direction属性 (设置主轴和主轴方向)

   • row:x轴（从左到右）（默认属性）
   • row-reverse:翻转（从右到左）
   • column：y轴
   • column-reverse：翻转

2. justify-content属性 （设置主轴上的子元素排列方式）

   • flex-start：从主轴头部开始排列（默认属性）
   • flex-end：从尾部开始
   • center：在主轴居中对齐
   • space-around:平分剩余空间
   • space-betwwen：先两边贴边，在平分剩余空间（重要）

3. flex-wrap属性 （当子元素超出父元素时，是否换行）

   • nowrap：不换行，会改变原有子元素的大小，挤占进去（默认属性）
   • wrap：不换行，另起一行显示

4. align-items属性 （设置侧轴上的的子元素排列方式（单行）） （默认是y轴）

   • flex-start:从上到下
   • flex-end：从下到上
   • center：垂直居中
   • stretch：拉伸（子元素没有设置高度时，这个为默认值）

5. align-content属性 （设置侧轴上的子元素的排列方式（多行））

   • flex-start：在侧轴的头部开始排列（默认属性）
   • flex-end：在侧轴的尾部开始排列
   • center：在侧轴中间显示
   • space-around：子项在侧轴平分剩余空间
   • space-between：子项在侧轴先分布在两头，在平分剩余空间
   • stretch：设置子元素高度平分元素高度

6. flex-flow属性 （flex-direction和flex-wrap属性的复合属性）

   • 如：flex-flow：column wrap;
   • 表示设置了flex-direction：column 和flex-wrap：wrap两个属性

flex布局子项常见属性

1. flex属性 （定义子项目分配剩余空间，用flex来表示占多少份）

   • 为子元素样式设置：flex：number（默认为0）
   • 一般子元素不设置宽度，每个设置flex：1，因为没有宽度所以剩余空间为所有空间，所以每个子元素都占一份，就做到的子元素均分

2. align-self属性 （控制某一个子项自己在侧轴上的排列方式）

   •   span:nth-child(2){
         /*设置自己在侧轴上的排列方式*/
         align-self：flex-end;
       }
     

3. order属性 （定义项目的排列顺序）

   • 数值越小，排列越靠前，默认为0
   • 注意：和z-index不一样