flex布局入门讲解

flex布局

特点

• 开启了flex布局的元素叫flex container（弹性容器）
• flex container里面的直接子元素叫做flex item（弹性项目）

当flex container中的子元素变成了flex item时，具有以下特点

• flex item的布局将受flex container属性的设置来进行控制和布局
• flex item 不再严格区分块级元素和行内元素
• flex item默认情况下时包裹内容的，但是可以设置宽度和高度

设置display属性为flex或者inline-flex可以成为flex container

• flex： flex container以block-level形式存在
• inline-flex： flex container以inline-level形式存在

flex item的宽度

flex container的属性

flex-direction

设置主轴的方向：

• row(默认)：主轴从左往右
• row-reverse：主轴从右往左
• column：主轴从向至下
• column：主轴从下至上

flex-wrap

设置当项目在一行排不下时候是否换行（flex container是单行显示还是多行）

• nowrap（默认）：单行（不换行）
• wrap：多行（换行）
• wrap-reverse：多行（换行，顺序是由下到上）

flex-flow

flex-direction和flex-wrap的简写，顺序任意，每个值不是必写

flex-flow:<‘flex-direction’> || <‘flex-wrap’>

justify-content

设置项目在主轴（main axis）的对齐方式

• felx-start(默认值)：与main start对齐
• flex-end：与main end对齐
• center：居中对齐
• space-between：
  • flex items之间的距离相等
  • 与main start、main end两端对齐
• space-around：
  • flex items之间的距离相等
  • flex items与main start、main end之间的距离是flex items（相邻的两个item之间的距离）之间距离的一半
• space-evenly：兼容性差
  • 两端也有空隙，并且所有的空间进行等分

align-items

设置（单行）flex item(项目)在cross axis（交叉轴）的对齐方式

• normal（默认）：在弹性布局中，效果和stretch一样
• stretch：当flex item 在cross axis 方向的size为 auto时，会自动拉伸至填充flex container(项目的高度是auto时才生效)
• flex-start：与cross start对齐
• flex-end：与cross end对齐
• center：居中对齐
• baseline：与基准线对齐

align-content

设置多行flex items在cross axis上的对齐方式，用法与justify-content类似

• stretch(默认值)：与align-items的stretch类似
• flex-start:
• flex-end:
• center:
• space-between
• space-around
• space-evenly：兼容性差

flex-item的属性

flex-order

设置flex item的排布顺序

• 可以设置任意整数，值越小就越排在前面
• 默认值是0

align-self

设置flex item在across axis的位置

• 默认值是normal

flex-grow

设置flex items如何扩展（拉伸/成长）

说明：当一个容器里面的项目排列完成，还剩下空间的时候，这些剩下的空间是不会分给项目，让项目填充的，如果设置了flex-grow:1，那么剩余的空间将都会分给设置这个属性的项目，如果一个项目设置了flex：1，一个设置了flex：2，那么剩余的空间将会被等分成3分，设置1的得到1份，设置2的得到2份

• 可以设置任意非负的数字（正小数、正整数、0）
• 默认值是0
• 当flex container在main axis方向有剩余的size时，flex-grow属性才会生效
• 如果所有flex items的flex-grow总和sum超过1，每个flex item扩展的四则为
  • flex container的剩余size*flex-grow/sum
• flex items扩展后的最终size不能超过max-width/max-height
  • 比如给一个项目设置了max-width\max-height,那么项目所分配的空间和项目的宽/高之和最多就是max-width\height

flex-shrink

决定了flex items如何收缩（缩小）

当项目在容器内水平排不下的时候，项目是否会被压缩

• 可以设置任意非负数字
• 默认值是1
• 当flex items在main axis方向上超过flex container的size，flex-shrink属性才会生效
• 如果所有flex items的flex-shrink总和超过1，每个flex item收缩的size为
  • flex items超出flex container的size*收缩比例/所有flex items的收缩比例之和
• flex items收缩后的最终size不能小于min-width/min-height

flex-basis

用来设置flex items 在main axis方向上的basis size（基础大小）

默认值是auto

举例： 当给一个项目设置了width，里面的内容是一个英文单词的时候，当单词在最后一个的时候放不下整个单词会直接换行，如果设置了flex-basis时候，则不会换行，会自动拉伸当前项目的宽度，知道单词能放下

觉得flex-item最终的basis size的因素（优先级从上到下）

• max-width/height、min-width/height
• flex-basis
• width\height
• 内容本身的size

flex

是felx-grow | | flex-shrink | | flex-basis的简写，flex属性可以指定1、2、3个值

• 值只有一个无单位的数字时，会被当作flex-grow
• 值是一个有效的宽度的时候，会被当作flex-basis
• 关键字 none 、auto、initial