目录
传统盒模型
Flexbox 布局方式
Flexbox 核心概念
Flex 容器属性
-
flex-direction：项目元素排列的方向 -
flex-wrap：项目元素排列方式 -
justify-content： 项目在主轴上的对齐方式
-
align-items：项目在交叉轴上的对齐方式
-
align-content：多行项目的排列方式
Flex 项目属性
-
order：项目的排列顺序 -
flex-grow： 项目的放大比例
-
flex-basis：项目在主轴上的空间
-
align-self：项目的对齐方式
正文
- 传统盒模型 ：通过
display、float等参数来配置具体的布局，这种方式代码简单，但是在处理实现诸如垂直居中、弹性宽度和高度等特性时会极为麻烦。
-
Flexbox 布局方式 ：可以快速的实现上述各种场景，以及更多非常常用的排版需求，例如：
— 竖排元素
— 元素左侧/右侧竖向对齐
Flexbox 核心概念
- 在进行Flexbox 布局时，核心的属性包括容器和项目：
— 容器 ： Flexbox 中外部的容器
— 项目 ： Flexbox 中内部的项目
通过设置容器的参数，来实现内部项目按一定的顺序来进行排布：
Flex 容器属性
- 通过设置 Flex 容器的属性，可以设置容器内各项目的样式
— flex-direction ：项目元素排列的方向
① 值为 row： 内部项目从左向右排列
② 值为 row-reverse ：内部项目反转横向排列
③ 值为 column ：内部项目纵向对齐
④ 值为 column-reverse ：内部项目反转纵向对齐
— flex-wrap ：项目元素排列方式
① 值为 nowrap ： 项目元素不会溢出，也不会自动换行
② 值为
wrap ： 当项目元素的宽度超出容器的时候，就会自动换行
③ 值为
wrap-reverse ：子元素溢出容器时会反转自动换行
— justify-content ： 项目在主轴上的对齐方式
① 值为 flex-start ：项目从主轴的开始位置对齐
② 值为 flex-end ： 项目从主轴的结束位置对齐
③ 值为 center ：项目从主轴的中间开始对齐
④ 值为 space-between ：各项目之间保持相同的距离进行排布
⑤ 值为
space-around ：不仅各项目间保持相同的距离，且在两侧也会有一定的距离来保持排列
—
align-items ：项目在交叉轴上的对齐方式① 值为
flex-start ：交叉轴的起点对齐
② 值为
flex-end：交叉轴的终点对齐
③ 值为
center ：交叉轴的中点对齐
④ 值为
baseline：当交叉轴与行内轴为同一条时，等价于 flex-start ；其他情况下以项目的第一行文字的基线对齐
⑤ 值为
stretch （默认值）：如果项目未设置高度或设置为auto，则沾满整个容器的高度。（同时收宽度和高度的限制）
— align-content ：多行项目的排列方式（定义多跟轴线的对齐方式，如果项目只有一根轴线，该属性不起作用）
① 值为 flex-start ：与交叉轴的起点对齐
② 值为 flex-end ：与交叉轴的终点对齐
③ 值为 center ：与交叉轴的中点对齐
④ 值为
space-between ：与交叉轴两端对齐，轴线之间的距离平均分布
⑤ 值为
space-around ：每根轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与边框之间的间隔大一倍
⑥ 值为
stretch （默认值）：各行平均分配。轴线占满整个交叉轴（同时受宽度和高度的影响）
Flex 项目属性
- 通过设置 flex 项目属性，我们可以控制各项目自己的属性
— order ：项目的排列顺序 （值越小，排列越靠前，默认为0）
—
flex-grow ： 项目的放大比例（默认为0，即如果有剩余空间，也不放大）
—
flex-shrink ：项目的缩小比例 （默认为1，即如果空间不足，则项目将缩小）
如果所有的项目
flex-shrink 属性都为1，则空间不够时，都将等比例缩小。如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。
— flex-basis ：项目在主轴上的空间 （默认为auto，即项目本来的大小），它可以设为跟 width 或 height 一样的
值，如 150px ，则项目将占据固定空间。
—
align-self ：项目的对齐方式，通过设置此属性，可以让项目和其他项目有不同的排列方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch 。此属性有下图中的6个值可选择（除auto外，其他与align-items 可选值相同）。
网友评论