Flex 补充属性与实战一、补充：Flex 容器属性1.1 row-gap、column-gap、gap 设置 flex 子项间隔属性名说明row-gap用于设置 flex 项目行之间的间隔大小（默认主轴为水平方向时）column-gap用于设置 flex 项目列之间的间隔大小（默认主轴为水平方向时）gapgap 为 row-gap 与 column-gap 的复合写法，即 gap: row...
Flex 项目属性一、Flex 项目属性概览以下 6 大属性为 Flex 项目属性，都是直接添加到项目身上：属性名说明默认值order定义项目的排列顺序。数值越小，排列越靠前0align-self单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性autoflex-growflex 项主尺寸的 flex 增长系数。默认为 0，即如果存在剩余空间，也不放大0flex-sh...
Flex 容器属性一、Flex 容器属性概览以下 6 个属性都是设置在 Flex 容器上：属性名说明flex-direction设置主轴的方向flex-wrap设置（项目）子元素是否换行flex-flow复合属性，相当于同时设置了 flex-direction 和 flex-wrapjustify-content设置主轴上的（项目）子元素排列方式align-items设置交叉轴上的（项目）子...
Flex 布局的基本概念一、什么是 Flex 布局1.1 基本定义Flex 是 Flexible Box 的缩写，意为"弹性盒子"Flex 布局是一种一维的布局模型，它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力Flexbox 是一种一维的布局，因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列1.2 为什么使用 Flex 布局传统布局的问题：浮动+定...
清除浮动的最佳实践1. 概念清除浮动: 浮动一定要封闭到一个盒子中,否则就会对页面后续元素产生影响。当子元素浮动后,父元素如果不设置高度,就会出现高度塌陷的问题,影响后续布局。2. 清除浮动方法 1: 使用 BFC2.1 原理让内部有浮动的父盒子形成 BFC,它就能关闭住内部的浮动。此时,最好的方法就是 overflow: hidden; 属性。2.2 示例* { margin: 0; ...