标签：flex 元素 容器 align 布局 弹性 学习 wrap content
一、弹性盒子
- 容器盒子里面包含着容器元素，使用 display:flex 或 display:inline-flex 声明为弹性盒子。
元素排列方向
| 值 | 描述 |
|---|---|
| flex-direction:row; | 从左到右水平排列元素（默认值） |
| flex-direction:row-reverse; | 从右向左排列元素 |
| flex-direction:column; | 从上到下垂直排列元素 |
| flex-direction:column-reverse; | 从下到上垂直排列元素 |
自适应换行
| 选项 | 说明 |
|---|---|
| flex-wrap:nowrap; | 元素不拆行或不拆列（默认值） |
| flex-wrap:wrap; | 容器元素在必要的时候拆行或拆列。 |
| flex-wrap:wrap-reverse; | 容器元素在必要的时候拆行或拆列，但是以相反的顺序 |
注意 ：flex-flow 是 flex-direction 与 flex-wrap 的组合简写模式
flex-flow: row-reverse wrap-reverse;
元素主轴排列方式
| 选项 | 说明 |
|---|---|
| justify-content：flex-start; | 元素紧靠主轴起点 |
| justify-content：flex-end; | 元素紧靠主轴终点 |
| justify-content：center; | 元素从弹性容器中心开始 |
| justify-content：space-between; | 第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间 |
| justify-content：space-around; | 每个元素两侧的间隔相等。元素之间的间隔比元素与容器的边距的间隔大一倍 |
| justify-content：space-evenly; | 元素间距离平均分配 |
元素交叉轴排列方式
| 选项 | 说明 |
|---|---|
| align-items:stretch; | 元素被拉伸以适应容器（默认值） |
| align-items:center; | 元素位于容器的中心 |
| align-items:flex-start; | 元素位于容器的交叉轴开头 |
| align-items:flex-end; | 元素位于容器的交叉轴结尾 |
注意；如果设置了 width | height | min-height | min-width | max-width | max-height ，将影响stretch 的结果，因为 stretch 优先级你于宽高设置。
元素交叉轴多行（flex-wrap:wrap）排列方式
| 选项 | 说明 |
|---|---|
| align-content:stretch; | 将空间平均分配给元素 |
| align-content:flex-start; | 元素紧靠交叉轴起点 |
| align-content:flex-end; | 元素紧靠交叉轴终点 |
| align-content:center; | 元素从弹性容器中心开始 |
| align-content:space-between; | 第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间 |
| align-content:space-around; | 每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 |
| align-content:space-evenly; | 元素间距离平均分配 |
单个元素交叉轴排列方式
| 选项 | 说明 |
|---|---|
| align-self:stretch; | 将空间平均分配给元素 |
| align-self:flex-start; | 元素紧靠交叉轴起点 |
| align-self:flex-end; | 元素紧靠交叉轴终点 |
| align-self:center; | 元素从弹性容器中心开始 |
自动分配余下空间
用于将弹性盒子主轴的可用空间，分配给弹性元素。flex-grow:1; 可以用小数或整数
空间不足缩小比例
如果全部设置flex-shrink:0; 都不缩小，单个可以整数或者小数设置缩小比例
定义元素基准尺寸宽高
可以是长度单位，也可以是百分比。flex-basis的优先级高于width、height属性，小于max-height,min-height。
注意：flex是flex-grow、flex-shrink 、flex-basis缩写组合。flex:1 1 200px;
改变单个元素顺序
用于控制弹性元素的位置，默认为 order:0 数值越小越在前面，可以负数或整数。
标签：flex,元素,容器,align,布局,弹性,学习,wrap,content 来源： https://www.cnblogs.com/1kxj/p/15848597.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。