弹性布局

弹性布局

网页默认的布局方式：流式布局

弹性布局：是css3新增的布局方式 不同于流式布局 弹性布局也叫Flex布局 采用 Flex 布局的元素 称为 Flex 容器(flex container) 简称容器 (通俗来讲就是父标签) 它的所有子元素自动成为容器成员 称为 Flex 项目(flex item) 简称项目 (通说来讲就是子标签)

使用需求：父子关系 “给父元素设置开启弹性布局 子元素按照排版进行布局” 弹性布局只对自己的亲儿子生效 对子标签的孩子无效 弹性布局没有行标签 块标签 行内块标签之分
弹性布局中元素根据轴进行排列 轴分为主轴 和 交叉轴 就是X轴和Y轴(默认根据主轴方向排列)

• 开启弹性布局

  • display: flex; 默认主轴为X轴 元素从左至右排列 元素不会自动换行 在一行显示 也不会撑大容器“会缩小自身范围”

• 设置元素是否换行

  • flex-wrap 属性：

    nowrap: (默认值) 不换行 如果空间不够 项目的尺寸会自动缩小
    wrap: 换行
    wrap-reverse: 反向换行（第二行在上面）

• 设置主轴的排列方向

  • flex-direction属性：

    row: (默认值) 主轴的水平方向 从左向右排列 交叉轴是垂直方向
    row-reverse: 主轴的水平方向 从右向左排列 交叉轴是垂直方向
    column: 主轴垂直方向 从上往下排列 交叉轴是水平方向
    column-reverse: 主轴垂直方向 从下往上排列 交叉轴是水平方向

    注意：主轴和交叉轴都不是唯一的，每一行都有一个主轴和交叉轴

• 设置主轴排版方式

  • justify-content属性：

    flex-start: (默认值) 从左至右排版 左对齐
    flex-end: 从右至左排版 右对齐
    center: 居中
    space-evenly: 平均分配 左右两边中间距离都一样
    space-around: 两端对齐 有留白
    space-between: 两端对齐 不留白

• 设置交叉轴排版方式

  • align-items属性：

    stretch: (默认值) 子元素如果不设置宽高 标签的宽高会占满整个容器
    flex-end: Y轴终点对齐
    flex-start: Y轴起点对齐
    center: 居中 Y轴中点对齐

• 设置多轴线对齐方式

  • align-content属性：

    stretch：(默认值) 轴线占满整个交叉轴
    flex-start：与交叉轴的起点对齐
    flex-end：与交叉轴的终点对齐
    center：与交叉轴的中点对齐
    space-between：与交叉轴两端对齐 轴线之间的间隔平均分布
    space-around：每根轴线两侧的间隔都相等 所以 轴线之间的间隔比轴线与边框的间隔大一倍

    注意：align-item单行 和 align-content多行 不要一起使用 会冲突

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

    flex-flow: row wrap;

• 如果让其中某些弹性项目有不同的布局方式 可以给弹性项目设置如下单独的样式

  • order属性：项目排列顺序 默认0 值越小 越靠前
  • align-self属性：单个元素在交叉轴上的对齐方式 值与align-item的相同
  • flex-grow属性: 设置项目的放大倍数 默认0 所有项目都为1 平分容器空间 单独给某个项目设置2 单独项目空间是其他的2倍
  • flex-shrink属性：规定某个项目对于其余项目将收缩多少 容器不换行 容器宽度不足时 元素的宽度会被压缩 flex-shrink设置每一个元素被压缩的比例 默认1(等比例压缩) 0表示不压缩 值越大压缩的越多
  • flex-basis属性：规定项目的初始长度 默认为auto
    可以自己设定width,height使项目占据固定的空间
  • flex属性：是flex-grow、flex-shrink、flex-basis的简写属性 默认值为 0 1 auto 后两个属性可选 此属性有两个快捷设置：auto=(1 1 auto) / none=(0 0 auto)

总结：

• 加给父容器的语法:
  • display:flex;
  • flex-wrap;
  • flex-direction;
  • justify-content;
  • align-items;
  • align-content;
  • flex-flow;
• 加给子项目的语法：
  • order;
  • align-self;
  • flex-grow;
  • flex-shrink;
  • flex-basis;
  • flex;