flex布局基本概念

基础理论-W3C-css

flex 布局基础
flex实例
MDN:flex

练习：

See the Pen flex布局实例 by ConanTvos (@lcc19941214) on CodePen.

什么是flex布局

flex即Flexible Box，弹性布局。

因为一些特殊的布局方式如不指定宽度高度的情况下要实现垂直居中实习起来比较不方便

如何使用flex布局

任何容器都可以指定为flex

1
2
3
4
5
6
7
8
9
.container {
    display: -webkit-flex;
    display: flex;
}
/*  适用于行内元素  */
.container {
    display: inline-flex;
}

理解flex布局

  • 使用了flex布局之后，子元素的float, clear, vertical-align都将失效

  • flex布局中的轴的概念：

    • 主轴（main-axis）：子元素将按照此顺序依次排列
    • 交叉轴（cross-axix）：子元素将按照此顺序依次换行/与主轴方向垂直
    • 主轴空间（main-size）：单个子元素在主轴上占据的空间

    • 交叉轴空间（cross-size）：单个子元素在交叉轴上占据的空间

      主轴、交叉轴二者是垂直关系，但两者并非只能代表水平或者垂直，因为可以通过flex-direction属性指定

flex的属性：

  • flex-direction 指定容器的主轴方向

    • row 水平从左到右
    • row-reverse
    • column
    • column-reverse

  • flex-wrap 指定子元素是否换行、以何种方向换行
    容器内子元素应当设置flex属性，不然默认值flex-grow为0，flex-shrink为1，所有项目都水平或者垂直排列在一行或者一列上了

    • nowrap
    • wrap
    • wrap-reverse

  • flex-flow flex-direction 和 flex-wrap 的简写形式，默认是flex-flow: row nowrap

对齐属性

  • justify-content 规定子元素在主轴方向上的排列顺序
    （默认是row的情况下）

    • flex-start 左对齐
    • flex-end 右对齐
    • center 居中对齐
    • space-between 两端分散对齐
    • space-around 分散对齐，每个子元素两侧距离相等（相当于元素两侧设置了相等的margin-left和margin-right）

  • align-items 规定子元素在交叉轴方向上的排列顺序
    （默认是column的情况下）

    • flex-start 顶端对齐
    • flex-end 底部对齐
    • center 垂直居中对齐
    • baseline 按照子元素第一行文字的基线对齐
    • strech 充满整个交叉轴（本意也就是延伸）

  • align-content 规定主轴上的多行元素在交叉轴上的排列

    • flex-start 交叉轴起点
    • flex-end 交叉轴重点
    • center 交叉轴中间
    • space-between 两端对齐
    • space-around 分散对齐，两侧距离相等
    • strech 充满整个交叉轴

flex-item属性：（flex内的子元素——只能是最近的一级，不能是子元素的子元素）

  • order 手动指定该元素在flex容器里地顺序，数值越小越靠前

  • flex-grow 规定子元素在有多余空白空间的情况下，按照怎样的比例扩展

    • 默认值为0，即不会自动扩展
    • 每一项都设置为1，则每项均等增加

    • 增加的宽度计算方式：

      1
      grow_width = blank_width * (flex-grow/sum(flex-grow))

  • flex-shrink 规定子元素在超出父容器的情况下，按照怎样的比例收缩

    • 默认值为1，即自动均等收缩
    • 每一项都设置为0，则每项都不收缩

    • 收缩的宽度计算方式：

      1
      shrunk_width = overflow_width * (flex-shrink/sum(flex-shrink))

      文章里说必须flex-shrink要乘以flex-basis，但是小学乘法告诉我不需要

  • flex-basis 规定子元素在主轴上占据的默认空间大小

    • 默认为auto, 也可以指定一个width

  • flex flex-grow flex-shrink flex-basis的简写形式

    • 默认为：0 1 auto

对齐属性

  • align-self 规定该元素在交叉轴上的”个性化”的对齐方式

    • flex-start
    • flex-end
    • center
    • baseline
    • strech