【前端三件套——CSSflex布局】简单知识整理

0. CSS3 弹性布局 flex

用来为盒状模型提供最大的的灵活性

**注意: ** 设为flex布局后，子元素的float、clear、vertical-align属性都会失效

弹性:可以自由伸缩，搜索窗口时可以体现

1. 基本概念

采用flex布局的元素,简称容器,容器的所有子元素自动成为容器成员，称为项目

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框
的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做
cross end 。
项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size 。

2. 容器属性

2.1 flex-direction

决定主轴方向,默认横向row

• row-reverse：水平，起点在右端

• column 主轴垂直,起点上沿

• column-reverse: 垂直，起点下沿

2.2 flex-wrap

默认排在轴线上

该属性设置,，若一条轴线排不下，如何换行

• nowrap 不换行（默认）

• wrap 换行,第一行在上方

• wrap-reverse 换行,第一行在下方

2.3 flex-flow

是上述俩属性的简写形式

默认值为row nowrap

2.4 justify-content

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

• 默认flex-start 左对齐

• flex-end 右对齐

• center 居中

• space-between 两端对齐，项目之间间隔相等

• space-around 每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍

• space-evenly 每个间隙距离相等(兼容处理:用 space-between配合before+after使用)

2.5 align-items

定义项目找交叉轴上如何对齐

• flex-start 交叉轴起点对齐
• flex-end 交叉轴中点对齐
• baseline 项目第一行文字的基线对齐
• stretch (默认值) 若项目未设置高度或设为auto，将占据整个容器高度

2.6 align-content

定义多根轴线的对齐方式(盒子有多行)

若项目只有一根轴线，则该属性不起作用

• flex-start 与交叉轴的起点对齐
• flex-end 与交叉轴的终点对齐
• center 与交叉轴中点对齐
• space-between 两端对齐,间隔平均分布
• stretch (默认值)轴线暂满整个交叉轴

3. flex属性

3.1 order

定义项目的排列顺序,数值约小,排列越靠前,默认为0

.item{
    order: int;
}

可以赋负值,强制排在前面

3.2 flex-grow

定义项目放大比例，即有剩余空间情况下，项目合并剩余空间

注意： 默认值为0，即即使有剩余空间，项目也不放大

如果有多个项目定义了该属性，按大小，等比例给予，如某一项目flex-grow为1，另一为二，则剩余空间按1:2赋予

.item{
    flex-grow: number;
}

3.3 flex-shrink

空间不足时,由于flex的弹性,项目均缩小,我们可以设置该属性,使某个项目不缩小

默认为1,即如果空间不足,该项目缩小,

不缩小的定义为0即可

3.4 flex-basis

定义分配多余空间之前,项目占据的主轴空间(mian size)

默认值为auto,即项目的本来大小

可以设为向width一样的值如200px，则项目将占据固定空间

3.5 flex连写

flex是flex-grow、flex-shrink、flex-basis的缩写,默认值为0 1 auto

.item{
    flex: none | [ <'flex-grow'><`flex-shrink`>? || <'flex-basis'>]
}

按这三个顺序赋值，none表示0 0 auto ,auto 表示(1 1 auto)

3.6 align-self

允许某个项目有与 其他项目不同的对齐方式,可覆盖align-items属性,默认值为auto,表示继承父元素的align-items,如果没有父元素,则等同stretch

各位看官觉得还不错可以点赞关注一下吗，我是前端小刘不怕牛牛，期待与您共同进步🤗🤗🤗