Day14 CSS-flex布局

flex 布局的设置

display: flex; // 不包裹内容
display: inline-flex; // 包裹内容
// tips:设为flex布局以后，子元素的 float、clear和vertical-align 属性将失效

• 对于 flex 布局，分为 flex 项目和 flex 容器，项目是在容器中的，容器的横向轴被称为主轴，纵向轴被称为交叉轴。

flex的容器属性

flex-direction: ; // 设置主轴方向

flex-direction: row; // 设置主轴为水平方向
flex-direction: row-reverse; // 设置主轴为水平反向
flex-direction: column; // 设置为垂直方向
flex-direction: column-reverse; // 设置为垂直反向

flex-wrap: ; // 设置换行

flex-wrap: wrap; // 如果一行轴线排不下，那就换行
flex-wrap: wrap-reverse; // 换行，第一行在下方
flex-wrap: nowrap; // 不换行

flex-grow: ; // 既可以设置主轴方向，也可以设置换行

flex-grow: row wrap;

justify-content: ; //设置在主轴线上的对齐

justify-content: flex-start; // flex项目在容器的最左边
justify-content: flex-end; // flex项目在容器的最右边
justify-content: center; // flex项目在容器的中间
justify-content: space-between; // flex项目之间间隔相等，铺满容器主轴
justify-content: space-around; // flex项目之间间隔相等,两边项目距离容器边界的距离是项目之间距离的一半
justify-content: space-evenly; // flex项目之间以及和容器边界之间间隔均相等

align-items: ; // 在交叉轴上实现的对齐

align-items: flex-start; // flex项目在容器中上下对齐，且往上靠
align-items: flex-end; // flex项目在容器中上下对齐，且往下靠
align-items: center; // flex项目在容器中心
align-items: baseline; // 项目的第一行文字的基准线对齐

align-content: ; // 多根轴线对齐的方式

align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
align-content: stretch;

flex的项目属性

flex-grow: ; // 是否填充剩余空间

flex-grow: 0; // 不填充剩余空间
flex-grow: 1; // 填充剩余空间
flex-grow: 2; // 相较于其他flex项目填充两倍空间

flex-shrink: ; // 如何缩小

flex-shrink: 1; // 等比缩小
flex-shrink: 0; // 不缩小

flex-basis: ; // 属性定义了在分配多余空间之前项目占据的主轴空间位置，默认为auto

flex-basis: auto; // 项目本来大小

flex: ; // 包括上面三种可以一起定义

flex: 0 1 auto; // 这种是比较推荐的

order: ; // 定义项目在容器中的排列顺序，数值越小，越靠前

order: 2;

align-self: ; // 单独设置一个项目的属性

align-self: flex-end; // 项目到容器的最底部
align-self: auto; // 默认情况
align-self: center; // 项目到容器的中间

min-width: ; // 最小宽度（随浏览器的宽度而改变）

min-width: 1140px;

max-width: ; // 最大宽度（随浏览器的宽度而改变）

max-width: 720px;

calc() 函数

• 作用：用于动态计算长度值

tips:

• 运算符前后都需要保留一个空格，例如：width: calc(100% - 10px);

• 任何长度值都可以使用 calc() 函数进行计算

• calc() 函数支持 "+","-","*","/" 运算

• calc() 函数使用标准的数字运算优先级规则