FLEX布局 - Tung in ECNU


FLEX布局

基本原理

传统布局

  1. 兼容性好
  2. 布局繁琐
  3. 有局限性

FLEX

  1. 操作方便,布局简单
  2. PC端支持较差
  3. IE11以下支持较差
  4. 任何一个容器都可以指定为flex布局

布局原理

  1. 当我们为父盒子设为flex布局后,子元素的float、clear和vertical-align属性将失效
  2. 通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
  3. 父容器称作容器 子元素称为项目

容器属性

  1. flex-direction 设置主轴的方向,默认是从左向右
  2. justify-content 设置主轴上的子元素排列方式 一定要确定好主轴

    1. flex-start 从头部开始
    2. flex-end 从尾部开始排列
    3. center 在主轴居中对齐
    4. space-around 平分剩余空间
    5. space-between 先两边贴边再平分剩余空间 :star:
  3. flex-wrap 设置子元素是否换行 flex默认是不换行 如果装不开会缩小子元素的宽度

    1. flex-wrap:nowrap 不换行 (默认)
    2. flex-wrap:wrap 换行
  4. align-content 设置侧轴上的子元素的排列方式(多行

    1. flex-start 从头部开始
    2. flex-end 从尾部开始排列
    3. center 居中对齐
    4. space-around 在侧轴平分空间
    5. space-between 子项在侧轴先分布在两头,再平分剩余空间
  5. align-items 设置侧轴上的子元素的排列方式(单行

    1. flex-start 从头部开始
    2. flex-end 从尾部开始排列
    3. center 居中 :star:
    4. stretch 拉伸
      注 : 多行和单行的是由是否换行定义的
  6. flex-flow

    1. 是flex-direction 和flex-wrap 的复合属性
    2. flex-flow:row wrap 是一种简写方式

子项常用属性

  1. flex属性定义子项目分配剩余空间,用flex来表示占多少份数
  2. align-self 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-item属性 (侧轴)
  3. order 定义项目的排列顺序,数字越小越靠前,默认是0

本文链接:

https://noahtung.xyz/index.php/archives/27/