box{ border:1px solid red; width: 730px; /* 设置成flex布局之后，子元素float就失效了 定位仍然可用 / display: flex; margin:20px auto; / 设置主轴方向 / / 默认 不换行 主轴方向从左到右 / / 从右到左的顺序呢？ / / flex-direction: row; / / 颠倒顺序 / / flex-direction: row-reverse; / / 主轴方向从上到下 / / 变换了主轴 / / flex-direction: column; / / 颠倒 / / flex-direction: column-reverse; / / flex布局默认不换行 / / 默认情况下，项目都排在一条线（又称"轴线"）上 / / flex-wrap: nowrap; / / 换行 / / flex-wrap: wrap; / / 上下行颠倒 / / flex-wrap: wrap-reverse; / / 复合属性 设置主轴方向和是否换行的 / / flex-flow:row wrap; / / flex-direction: column;/ height: 600px; / 定义了项目在主轴上的对齐方式（应为你的主轴是水平方向的 ） / / justify-content: flex-start; / / 左对齐 / / justify-content: flex-end; / / 右对齐 / / 所以 justify-content: center 表示水平方向居中*/ justify-content: center; /* flex布局不像绝对定位，脱离文档流，flex布局设置了还是会遵守文档流布局 / / 子元素靠边对齐 两端对齐，项目之间的间隔都相等*/ /* justify-content: space-between; / / 子元素 左右的距离保持一样 相邻子元素之间的距离会变成2倍*/ /* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 / / justify-content: space-around; / / 子元素相邻的距离保持一致 / / justify-content: space-evenly; / / 定义项目在交叉轴上对齐方式 / / 垂直方向居中 / / align-items: center; / / 垂直方向的顶部 交叉轴的起点对齐 / / align-items:flex-start; / / 垂直方向的底部 交叉轴的终点对齐*/ /* align-items: flex-end; / / baseline: 项目的第一行文字的基线对齐 / / 垂直方向按照子元素的文字所在的底部位置进行对齐 / / align-items: baseline; / / stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度 / / align-items: stretch; */ flex-wrap: wrap; } .box .item{ width: 200px; height: 200px; height: auto; background-color: cadetblue; margin:5px;
作者：上单掘墓
链接：juejin.cn/post/703849…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
