全面掌握 Flex

七姊蔷薇
127 阅读4分钟

容器属性

任何一个容器都可以被指定为flex 布局，指定为flex布局之后， 子元素的float、clear、vertical-align 属性将失效

.box {
    display: flex;
    display: -webkit-flex;    /* Safari */
}
  1. flex-direction
  2. flex-wrap
  3. flex-flow
  4. justify-content
  5. align-items
  6. align-content

1、flex-direction: 决定主轴的方向

  • row 起点左侧 水平主轴 (默认)
  • row-reverse 起点右侧 水平主轴
  • column 起点上侧 垂直主轴
  • column-reverse 起点下侧 垂直主轴

2、flex-wrap: 决定是否换行及行起位置

  • nowrap 不换行 (默认)
  • wrap 换行 第一行在上方
  • wrap-reverse 换行 第一行在下方

3、flex-flow: flex-direction 和 flex-wrap 的合并

  • row nowrap 水平主轴，左端起 不换行
  • row wrap 水平主轴，左端起 换行 第一行在上方
  • row wrap-reverse 水平主轴，左端起 换行 第一行在下方
  • column nowrap 垂直主轴，上端起 不换列
  • column wrap 垂直主轴，上端起 换列 第一列在左侧
  • column wrap-reverse 垂直主轴，上端起 换列 第一列在右侧
  • row-reverse wrap 水平主轴，右端起 换行 第一行在上方
  • row-reverse nowrap 水平主轴，右端起 不换行
  • row-reverse wrap-reverse 水平主轴，右端起 换行 第一行在下方
  • column-reverse nowrap 垂直主轴，下端起 不换列
  • column-reverse wrap 垂直主轴，下端起 换列 第一列在左侧
  • column-reverse wrap-reverse 垂直主轴，下端起 换列 第一列在右侧

4、justify-content: 属性 定义了项目在主轴上的对齐方式

  • flex-start 主轴起点对齐 (默认)
  • flex-end 主轴终点对齐
  • center 主轴垂直中心线对齐
  • space-between 主轴垂直两端对齐
  • spece-around 主轴垂直两端平分对齐 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5、align-items: 属性 定义了项目在主轴上的对齐方式

  • flex-start 交叉轴起点对齐
  • flex-end 交叉轴终点对齐
  • Center 交叉轴垂直中心线对齐
  • baseline 手行文字基线对齐
  • stretch 延伸 (默认)

6、align-content: 该属性定义了多根轴线的对齐方式，也就是说flex-wrap不为nowrap的属性，存在多行或者多列的情况，一根轴线也就是一行的时候该属性不起作用

  • flex-start 与交叉轴起点对齐
  • flex-end 与交叉轴终点对齐
  • center 与交叉轴中点对齐
  • space-between 与交叉轴两端对齐，轴线之间间隔平均分布
  • space-around 每根轴线两侧的间隔都相等
  • stretch 轴线占满整个交叉轴 (默认)

项目属性

  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basis
  5. flex
  6. align-self

1、order: 定义项目的排列顺序 数值越小，排列越靠前，默认为0

  • 0 默认
  • -xx 往前排
  • 999 往后排

2、flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

  • 0 项目本身大小（默认）
  • 1 所有项目都为1 则等分剩余空间，注意是在原有项目大小的基础上增加剩余空间的等分，也就是说仅当原有所有项目的宽度相等时，等分剩余空间之后所有项目宽度才会相等
  • 一个项目为2，其他为1 则为二的占据剩余空间是为1 的两倍

3、flex-shrink: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 等比例缩小

  • 1 等比例缩小（默认）
  • 0 不缩小 不缩小的话可能会超出容器宽度

4、flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间 浏览器会根据这个属性来计算主轴是否有多余空间，默认值为auto，也就是项目本来的大小

  • auto 这个值即为项目本来大小
  • length exp:300px 可设置为width或length一样的值，优先确定该项目占据的空间

5、flex: flex-grow、flex-shrink、flex-basis 集合属性，后两个值为可选

  • auto （1 1 auto）可放大、可缩小、基于项目原本大小 行撑满
  • none (0 0 auto) 不可放大、不可缩小、等于项目原本大小
  • 1 0 auto 可放大、不可缩小，基于项目原本大小
  • 0 1 auto 不可放大、可缩小，基于项目原本大小
  • 1 可放大 = （1 1 auto）

6、align-self: 该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认继承 auto 如果没有 align-items 本身是由容器元素设置，如需本项目不同于整体的对齐方式可自行设置

  • auto （默认采用父容器的align对齐方式）
  • flex-start 与交叉轴起点对齐
  • flex-end 与交叉轴终点对齐
  • center 与交叉轴中点对齐
  • space-between 与交叉轴两端对齐，轴线之间间隔平均分布
  • space-around 每根轴线两侧的间隔都相等
  • stretch 轴线占满整个交叉轴 (默认)

avatar
文章
阅读
粉丝