1.来源
需求:一种更为简单、有效的方式来对一个元素块中的子元素进行排列、对齐和分配空余空间。
2.基本概念
3.属性详解
①应用:display:flex;
②决定主轴的方向:flex-direction
- row; 主轴横向从左至右
- row-reverse;主轴横向,从右至左
- column;主轴纵向,从上至下
- column-reverse;主轴纵向,从下至上
③换行:flex-wrap: wrap;
④主轴方向的对齐方式:justify-content
- flex-end:右对齐
- flex-start(默认值):左对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。
⑤交叉轴方向的对齐方式:align-items
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
⑥弹性增长因子flex -grow
该CSS属性设置子元素在弹性容器的具有剩余空间是应该如何分配给元素。flex-grow剩余空间是flex容器的大小减去所有flex项目的大小。如果所有兄弟项目具有相同的弹性增长因子,则所有项目将获得相同的剩余空间份额,否则将根据不同弹性增长因子定义的比率进行分配。
⑦弹性缩放因子flex-shrink
定义项目的缩小比例,即如果空间不足,该项目将缩小(默认为1);
⑧flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选flex: flex-grow flex-shrink flex-basis;
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。 建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
⑨order
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
⑩align-self属性
弹性盒子内的单个子元素在纵轴的顺序。
- auto:如果’align-self’的值为’auto’,则其计算值为元素的父元素的’align-items’值,如果其没有父元素,则计算值为’stretch’。
- flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
- center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
- baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐。
- stretch:如果指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制。