html盒布局的优点,CSS盒子弹性布局

@[TOC]HTML+CSS 实现网页弹性布局

弹性盒子

推荐学习地址：

链接: CSS3 弹性盒子(Flex Box).

居中特性了解：

align-items

justify-content

align-content

B站

可布局效果：

项目地址：https://download.youkuaiyun.com/download/LF2018131/18888035

基本知识及特性

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

特点：

灵活，常用于页面布局，解决屏幕的适配问题。

使用：

当使用盒子的弹性布局时，可以不用再使用" display: inline-block " 进行块级元素或行内元素到行内块元素的转化。

将display：flex; 添加到父级容器里面。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

基本语法：

Document

width: 400px;

height: 400px;

border: 1px solid #f40;

display: flex;/*添加盒子的弹性布局*/

}

.inner {

width: 100px;

/* width: 98px; */

height: 100px;

border: 1px solid rgb(0, 0, 0);

/* display: inline-block; */

/* display: inline-block; */

/*当使用盒子的弹性布局时，可以不用再使用 display: inline-block

进行块级元素或行内元素到行内块元素的转化*/

}

效果：

布局可能出现的问题

盒子压缩变形

当容器增加到8个时，原定的width：100px 已经缩小变形。

width: 400px;

height: 400px;

border: 1px solid #f40;

display: flex;

}

.inner {

width: 100px;

/* width: 98px; */

height: 100px;

border: 1px solid rgb(0, 0, 0);

/* display: inline-block; */

}

盒子1

盒子2

盒子3

盒子4

盒子5

盒子6

盒子7

盒子8

效果：

原因：/* 弹性盒模型， 可以规定盒子内的子元素默认按照水平方向排列 默认不换行 */

解决方法：

style 部分不做改变，只对body 部分做出改变：

将8个小盒子分别装进两个盒子里面，4个一组。

盒子1

盒子2

盒子3

盒子4

盒子5

盒子6

盒子7

盒子8

效果：

结果出现新问题。子代垂直排布。

原因：

默认垂直方向排列剩余的均分 ，即 先把垂直方向填完 。

子代垂直排列

解决方法：

回到上一步，不要添加 div 把它划分为两个模块，直接在父级里面添加 样式：

flex-wrap: wrap;

若再添加一句align-items: center; 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。

align-items用法: 链接.

推荐写法

width: 400px;

height: 400px;

border: 1px solid #f40;

display: flex;

/* 清除默认垂直排列 */

flex-wrap: wrap;

/* 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。 */

align-items: center;

/* 元素向侧轴起点对齐。*/

/* align-content: flex-start; */

/* 规定辅轴方向 (y)的排列方式 多个主轴时*/

align-content: flex-start;

/* 规定主轴方向 (y)的排列方式 */

/* justify-content: center; */

/* 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。 */

/* justify-content: space-between; */

/* 每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 */

justify-content: space-around;

}

.inner {

/* width: 100px; */

/* 将每个盒子大小减去边框的粗细，使之可以刚好排在一行 */

width: 98px;

height: 100px;

border: 1px solid rgb(0, 0, 0);

/* display: inline-block; */

}

盒子1

盒子2

盒子3

盒子4

盒子5

盒子6

盒子7

盒子8

效果

调整父级盒子与子盒子的大小，利用居中布局自己想要的模式。