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;
        width: 80%; 
        height: 300px;
        background-color: pink;
      }
      div span{
        margin-right: 10px;
        width: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布局父项常见属性

flex-direction属性 (设置主轴和主轴方向)
- row:x轴（从左到右）（默认属性）
- row-reverse:翻转（从右到左）
- column：y轴
- column-reverse：翻转
justify-content属性（设置主轴上的子元素排列方式）
- flex-start：从主轴头部开始排列（默认属性）
- flex-end：从尾部开始
- center：在主轴居中对齐
- space-around:平分剩余空间
- space-betwwen：先两边贴边，在平分剩余空间（重要）
flex-wrap属性（当子元素超出父元素时，是否换行）
- nowrap：不换行，会改变原有子元素的大小，挤占进去（默认属性）
- wrap：不换行，另起一行显示
align-items属性（设置侧轴上的的子元素排列方式（单行））（默认是y轴）
- flex-start:从上到下
- flex-end：从下到上
- center：垂直居中
- stretch：拉伸（子元素没有设置高度时，这个为默认值）
align-content属性（设置侧轴上的子元素的排列方式（多行））
- flex-start：在侧轴的头部开始排列（默认属性）
- flex-end：在侧轴的尾部开始排列
- center：在侧轴中间显示
- space-around：子项在侧轴平分剩余空间
- space-between：子项在侧轴先分布在两头，在平分剩余空间
- stretch：设置子元素高度平分元素高度
flex-flow属性（flex-direction和flex-wrap属性的复合属性）
- 如：flex-flow：column wrap;
- 表示设置了flex-direction：column 和flex-wrap：wrap两个属性

flex布局子项常见属性

flex属性（定义子项目分配剩余空间，用flex来表示占多少份）
- 为子元素样式设置：flex：number（默认为0）
- 一般子元素不设置宽度，每个设置flex：1，因为没有宽度所以剩余空间为所有空间，所以每个子元素都占一份，就做到的子元素均分

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

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

order属性（定义项目的排列顺序）
- 数值越小，排列越靠前，默认为0
- 注意：和z-index不一样

来源：https://www.cnblogs.com/JCDXH/p/11751627.html

标签

flex布局