今天做一个小实战, 需要让一个登录框始终保持水平和垂直居中, 第一个想到的就是通过定位(要想让一个 div 居中, 采用定位可以解决, 示例),
然后开始接触 flex 布局, 学完感觉真的好用, 现把知识点记录一下, 以便自己日后查看(学习教程: 阮大师的教程 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html ), 笔记开始:
传统的布局: 围绕盒子模型 (border,margin,padding) 定位(position), 浮动(float) 等.
flex 布局又叫弹性布局 , 主要内容包括两大部分有: 容器 (父元素) 的六个属性和项目 (子元素) 的六个属性
基本概念:
采用 Flex 布局的元素, 称为 Flex 容器(flex container), 简称 "容器". 它的所有子元素自动成为容器成员, 称为 Flex 项目(flex item), 简称 "项目".
容器默认存在两根轴: 水平的主轴 (main axis) 和垂直的交叉轴(cross axis).
主轴的开始位置 (与边框的交叉点) 叫做 main start, 结束位置叫做 main end; 交叉轴的开始位置叫做 cross start, 结束位置叫做 cross end.
项目默认沿主轴排列. 单个项目占据的主轴空间叫做 main size, 占据的交叉轴空间叫做 cross size.
一, 容器的六个属性:
1,flex-direction 属性: 决定主轴的方向, 有四个属性值
row | row-reverse | column | column-reverse;
row: 默认, 主轴为水平方向, 起点在左端;
row-reverse: 主轴在水平方向, 起点在右端;
column: 主轴在垂直方向, 起点在上边;
column-reverse: 主轴在垂直方向, 起点在下边;
2,flex-wrap 属性: 决定当一条轴线排不下所有的项目时, 是否换行, 有三个属性值:
nowrap | wrap | wrap-reverse;
nowrap: 默认, 不换行, 当排不下时, 会按项目的 flex-shrink 属性 (见下, 项目的缩小比例, 默认为 1) 的值来对项目进行缩小;
wrap: 换行, 第一行在上方;
wrap-reverse: 换行, 第一行在下方;
3,flex-flow 属性: 是 flex-direction 属性和 flex-wrap 属性的简写形式, 默认值为 row nowrap
4,justify-content 属性: 定义了项目在主轴上的对齐方式, 有五个属性值:
flex-start | flex-end | center | space-between | space-around
flex-start: 默认值, 主轴上起点对齐;
flex-end: 主轴上终点对齐;
center: 在主轴上居中;
space-between: 两端 (起点和终点) 对齐, 项目之间的间隔都相等;
space-around: 每个项目两侧的间隔相等. 所以, 项目之间的间隔比项目与边框的间隔大一倍
具体的视觉上的对齐方式与主轴的方向有关, 在主轴方向为默认情况下(主轴为水平方向, 起点在左端):
flex-start: 左对齐;
flex-end: 右对齐;
center: 水平居中;
space-between: 两端 (左右两边) 对齐, 项目之间的间隔都相等;
space-around: 每个项目两侧 (左右两侧) 的间隔相等. 所以, 项目之间的间隔比项目与边框的间隔大一倍;
5,align-items 属性: 定义项目在交叉轴上的对齐方式, 有五个属性值:
flex-start | flex-end | center | baseline | stretch;
flex-start: 默认值, 交叉轴上起点对齐;
flex-end: 交叉轴上终点对齐;
center: 在交叉轴上居中;
- baseline:
- stretch:
6,align-content 属性: 定义了多根轴线的对齐方式. 如果项目只有一根轴线, 该属性不起作用, 有六个属性值,
flex-start | flex-end | center | space-between | space-around | stretch
stretch(默认值): 轴线占满整个交叉轴.
flex-start: 与交叉轴的起点对齐.
flex-end: 与交叉轴的终点对齐.
center: 与交叉轴的中点对齐.
space-between: 与交叉轴两端对齐, 轴线之间的间隔平均分布.
space-around: 每根轴线两侧的间隔都相等. 所以, 轴线之间的间隔比轴线与边框的间隔大一倍.
二, 项目的属性
1,order 属性: 定义项目的排列顺序, 数值越小排列越靠前, 默认为 0,
order: 整数
2,flex-grow 属性: 定义项目的放大比例, 当有剩余空间时即会根据该值进行放大, 默认为 0, 即有剩余空间时也不放大
如果所有项目的 flex-grow 属性都为 1, 则它们将等分剩余空间(如果有的话). 如果一个项目的 flex-grow 属性为 2, 其他项目都为 1, 则前者占据的剩余空间将比其他项多一倍.
3,flex-shrink 属性: 定义了项目的缩小比例, 默认为 1, 即如果空间不足, 该项目将缩小
如果所有项目的 flex-shrink 属性都为 1, 当空间不足时, 都将等比例缩小. 如果一个项目的 flex-shrink 属性为 0, 其他项目都为 1, 则空间不足时, 前者不缩小.
负值对该属性无效
4,flex-basis 属性: 定义了在分配多余空间之前, 项目占据的主轴空间(main size). 浏览器根据这个属性, 计算主轴是否有多余空间. 它的默认值为 auto, 即项目的本来大小.
可以设为跟 width 或 height 属性一样的值(比如 350px), 则项目将占据固定空间.
5,flex 属性: 是 flex-grow, flex-shrink 和 flex-basis 的简写, 默认值为 0 1 auto. 后两个属性可选
该属性有两个快捷值: auto (1 1 auto) 和 none (0 0 auto)
6,align-self 属性: 允许单个项目有与其他项目不一样的对齐方式, 可覆盖 align-items 属性. 默认值为 auto, 表示继承父元素的 align-items 属性, 如果没有父元素, 则等同于 stretch
有六个属性值: auto | flex-start | flex-end | center | baseline | stretch
主要的注意点有:
任何元素都可以设置成弹性布局;
弹性容器中, 只有直接子元素为弹性元素;
要想让其孙元素也为弹性元素, 要在相应的弹性子元素上添加样式 display:inherit.
来源: https://www.cnblogs.com/lihuijuan/p/8793292.html