html弹性重叠,html 弹性布局 学习记录

display:flex

flex是flexible box缩写, 意为”弹性布局”,用来为盒装模型提供最大的灵活性;

flex内的子元素 float , clear , vertical-align都会失效

容器定义

.container{

display: flex | inline-flex;

}

块元素的时候使用 flex 行内元素使用 inline-flex

flex-direction 决定主轴方向(即项目的排列方向) column时候 主轴是竖向的 flex中的宽度高度互换

.container{

display: flex;

flex-direction: row | row-reverse | column | column-reverse;

}

默认 row 即水平方向 从左到右

flex-wrap 是否换行 换行后每行的高度为 (容器高度/行数)

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow flex-direction , flex-wrap 简写模式

jutstify-content 定义项目在主轴的对齐方式

flex-start 左对齐 flex-end 右对齐

center 居中

space-between 两端对齐,项目之间间隔相等;

space-around 每个项目左右的间隔相等

align-items(单行使用) 定义项目在交叉轴上的对齐方式

默认为: stretch 即未设置高度或者设置为auto, 自动拉到占满容器的高度( 换行则均分)

flex-start: 交叉轴的起点对齐 (左上对齐, 不自动撑大高度)

flex-end: 交叉轴的终点对齐

center: 交叉轴的中点对齐

baseline: 项目的第一行文字的基准线对齐 (即以第一个项目中的第一行文字的底下为对齐线)

align-content (多行使用) 定义了多根轴线的对齐方式,如果项目只有一根轴线,那么该属性将不起作用(flex-wrap 为wrap, wrap-reverse且换行的情况下生效)

stretch:默认设置，会拉伸容器内每个项目占用的空间，填充方式为给每个项目下方增加空白。第一个项目默认从容器顶端开始排列。

其他属性都会取消项目见空白;

flex-start 在最顶上

flex-end 在最底下

center 居中

space-between 两端对齐,项目之间间隔相等;

space-around 每个项目左右的间隔相等

FLEX 项目属性:

order: 定义下项目在容器中的排列顺序, 数值越小默认值为0

flex-basis 定义了在分配多余控件之前项目占据的主轴控件,浏览器根据这个属性计算主轴是否有多余控件

默认 auto 即本身大小

设置flex-basis后, 项目的宽度会失效, flex-basis需要跟flex-grow flex-shrink 配合使用;

flex-grow 定义项目的放大比例(支持小数)

默认值为0 即存在多余控件也不放大

1 即将所有为1的项目均分剩余控件

2 将其他项目都为1 则 为2的占据的控件是1的一倍;

数字可以依次增加

宽度不足时候不进行分配;

flex-shrink 定义项目的缩小比例

默认值为1 如果控件不足,该项目将缩小, 负值无效;

为0 时候 不缩小 都为0 且 容器不够的时候 自动撑大;

flex: 即 flex-grow , flex-shrink , flex-basis 缩写

快捷值 auto (1 1 auto)

none( 0 0 auto)

flex几种取值

flex: 1

等于

{

flex-grow: 1;

flex-shrink:1;

flex-basis : 0%;

}flex: 2%

等于

{

flex-grow: 1;

flex-shrink:1;

flex-basis : 2%;

}flex:24px;

等于

{

flex-grow: 1;

flex-shrink:1;

flex-basis : 24px;

}flex: 2 3;

等于

{

flex-grow: 2;

flex-shrink:3;

flex-basis : 0%;

}flex:11 32px;

等于

{

flex-grow: 11;

flex-shrink:1;

flex-basis : 32px;

}

align-self 允许单个项目有与其他项目不一样的对齐方式

默认为auto; 标识继承父元素的align-items属性, 如果没有父元素,则等同于 stretch (高度自动撑起)

align-self: auto | flex-start | flex-end | center | baseline | stretch;}