flex布局原理

flex是flexible box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

  • 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局

采用flex布局的元素，称为flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称项目。
总结flex布局原理：就是通过给父盒子添加flex属性，来控制盒子的位置和排列方式。

常见父项属性

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

flex-direction设置主轴方向

主轴与侧轴

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴。

  • 默认主轴方向就是x轴方向，水平向右
  • 默认侧轴方向就是y轴方向，水平向下

    属性值

    flex-direction属性决定主轴的方向（即项目的排列方向）
    注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴。而我们的子元素是跟着主轴来排列的。
属性值 说明
row 默认值从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

点击查看【codepen】

justify-content设置主轴上的元素排列方式

justify-content属性定义了项目在主轴上的对齐方式。
注意：使用这个属性之前一定要确定好主轴是哪个。

属性值 说明
flex-start 默认值从头部开始，如果主轴是x轴，则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐（如果主轴是x轴则水平居中）
space-around 平分剩余空间
space-between 先两边贴边，再平分剩余空间

点击查看【codepen】

flex-wrap设置子元素是否换行

flex布局中，默认的子元素是不换行的，如果装不下，会缩小子元素的宽度，放到父元素里面。

属性值 说明
nowrap 默认值，不换行
wrap 换行

点击查看【codepen】

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

该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用。

属性值 说明
flex-start 默认值，从上到下
flex-end 从下到上
center 挤在一起居中（垂直居中）
stretch 拉伸（子元素不设置高度才可以拉伸子元素高度）

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

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

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

align-content和align-items区别

  • align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
  • align-content适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
  • 总结就是单行找align-items，多行找align-content

点击查看【codepen】

flex-flow（复合属性）

flex-flow属性是flex-direction和flex-wrap属性的复合属性。

  1. flex-flow: row wrap;

flex布局子项常见属性

  • flex子项目占的份数
  • align-self控制子项自己在侧轴的排列方式

  • order属性定义子项的排列顺序（前后顺序）

    order

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

    flex-grow

  • flex-grow规定了flex-grow项在flex容器中分配剩余空间的相对比例。

  • 剩余空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将剩余空间按相同比例分配，否则将根据不同的flex-grow定义的比例进行分配。

  • 初始值：0

    flex-shrink

  • flex-shrink属性指定了flex元素的收缩规则。

  • flex元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据flex-shrink的值。

  • 初始值：1

    flex-basis

  • flex-basis指定了flex元素在主轴方向上的初始大小

  • 如果不使用box-sizing改变盒模型的话，那么这个属性就决定了flex元素的内容盒（content-box）的尺寸
  • 当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级.
  • 默认值：auto

    flex属性

    flex属性定义子项目分配剩余空间，用flex来表示占多少份数。
    初始值：0、1、auto
    1. .item {
    2. flex: <number>; /* default 0 */
    3. }

    align-self控制子项自己在侧轴上的排列方式

    align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
属性值 说明
auto 默认值
flex-start
flex-end
center
baseline
stretch

点击查看【codepen】

控制Flex子元素在主轴上的比例

参考：控制Flex子元素在主轴上的比例