CSS3中的弹性盒子模型

发布时间:2021-01-12 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了CSS3中的弹性盒子模型前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

介绍

在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型。这两种方案表示的是一种盒子模型的渲染模式。而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的、灵活的布局方案。弹性盒子模型是css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案。主要是对一个容器中的子元素进行排列、对齐和分配空白空间的方案的调整。

新旧版本的弹性盒子模型

在之前,css3曾经推出过旧版本的弹性盒子模型。相对于新版本的弹性盒子模型而言,旧版本的内容与新版本还是有些出入。而且,从功能上来讲,旧版本的弹性盒子模型远远没有新版本的盒子模型强大,从兼容性来讲,二者在pc端ie9以下都存在着兼容性问题,但是在移动端,旧版本的弹性盒子模型兼容性则更好一点。但是对于我们来说,我们依然要将主要的精力放在新版本的弹性盒子模型的身上,因为旧版本的弹性盒子模型淘汰是必然,随着手机端的兼容性逐渐提升,旧版本必将被淘汰。另外,新版本具有更加强大的功能,也值得我们进行深度的学习。那么我们对于新旧两个版本的弹性盒子模型,我们只需要抱着对比的心态学习即可,掌握新版本,了解旧版本,这样即使有一天我们需要使用旧版本,也可以非常容易的学习旧版本的弹性盒子模型。

相关概念

主轴我们以元素排在一行为例,当元素排列在一行的时候,主轴既表示元素排列的方向,横向排列则主轴即可以理解为一条横线,又因为我们元素默认是从左向右排列,那么我们可以说在默认的情况下,元素的主轴的起始位置是在左,而方向为右,终点也为右。

侧轴元素垂直的方向即为侧轴。默认上为起点,下为终点。

弹性容器我们想要使用弹性盒子模型,就需要将容器转换为弹性容器,我们说一个包含于子元素的容器设置了display:flex,那么这个容器也就变成了弹性容器。

弹性子元素当子元素的父元素变成了弹性容器,那么其中的所有的子元素也自然而然的变成了弹性子元素。

如何创建一个弹性容器:

display:flex | inline-flex

弹性容器属性

flex-direction弹性容器中子元素的排列方式(主轴排列方式)

属性值:

row:默认在一行排列

row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。)

column:纵向排列。

column-reverse:反转纵向排列,从下往上排,最后一项排在最上面

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>flex-direction</title>

<style>

html,body {

margin:0;

padding:0;

}

nav {

height: 500px;

background-color: lightcyan;

display: flex;

flex-direction: row-reverse;/*居左1234 变成居右4321*/

flex-direction: column;/*居左1234变成上下1234*/

flex-direction: column-reverse;/*变成下上1234*/

}

nav div {

width: 100px;

height: 100px;

background-color: lightblue;

line-height: 100px;

text-align: center;

font-weight: bold;

margin-right: 10px;

}

</style>

</head>

<body>

<nav>

<div class="d1">1</div>

<div class="d2">2</div>

<div class="d3">3</div>

<div class="d4">4</div>

</nav>

</body>

</html>flex-wrap设置弹性盒子的子元素超出父容器时是否换行

属性值:

nowrap: 默认值。规定元素不拆行或不拆列。

wrap:规定元素在必要的时候拆行或拆列。

wrap-reverse:规定元素在必要的时候拆行或拆列,但是以相反的顺序。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>flex-wrap</title>

<style>

.box {

height: 600px;

background-color: lightgoldenrodyellow;

display: flex;

/*设置了属性为wrap,那么一行放不下的时候会自动的去下一行*/

/*flex-wrap:wrap;*/

/*设置了属性为wrap-reverse会让排序发生一个反转,虽然同样是多行,但是会变成从下到上*/

flex-wrap: wrap-reverse;

}

.box div {

width: 100px;

height: 100px;

background-color: lightblue;

line-height: 100px;

text-align: center;

font-weight: bold;

margin: 10px;

}

</style>

</head>

<body>

<div class="box">

<!--此时元素如果不换行,那么当一行的整体放不下时,每个元素就会相应的缩小-->

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<div>6</div>

<div>7</div>

<div>8</div>

<div>9</div>

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<div>6</div>

<div>7</div>

<div>8</div>

<div>9</div>

</div>

</body>

</html>flex-flowflex-direction 和 flex-wrap 的简写

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>flex-wrap</title>

<style>

.box {

height: 600px;

background-color: lightgoldenrodyellow;

display: flex;

flex-flow: row wrap;

}

.box div {

width: 100px;

height: 100px;

background-color: lightblue;

line-height: 100px;

text-align: center;

font-weight: bold;

margin: 10px;

}

</style>

</head>

<body>

<div class="box">

<!--此时元素如果不换行,那么当一行的整体放不下时,每个元素就会相应的缩小-->

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<div>6</div>

<div>7</div>

<div>8</div>

<div>9</div>

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<div>6</div>

<div>7</div>

<div>8</div>

<div>9</div>

</div>

</body>

</html>align-item设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式

相关属性值:

flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。

flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。

center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。

baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>align-item</title>

<style>

.box {

height: 600px;

background-color: lemonchiffon;

display: flex;

/*默认 侧轴起点横向排列*/

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

/*侧轴终点横向排列*/

/*align-items: flex-end;*/

/*侧轴终点横向排列*/

/*align-items: center;*/

align-items: baseline;

}

.box div{

width: 100px;

height: 100px;

background-color: lightsalmon;

text-align: center;

line-height: 100px;

font-weight: bold;

margin:10px;

}

</style>

</head>

<body>

<div class="box">

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

</div>

</body>

</html>align-content修改 flex-wrap 属性的行为,类似 align-items,但不是设置子元素对齐,而是设置行对齐(行与行的对其方式).

相关属性:

flex-start: 没有行间距

flex-end: 底对齐没有行间距

center :居中没有行间距

space-between:两端对齐,中间自动分配

space-around:自动分配距离请注意本属性在只有一行的伸缩容器上没有效果。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>align-content</title>

<style>

nav {

height: 600px;

background-color: lemonchiffon;

display: flex;

/*开启多行*/

flex-wrap: wrap;

/*侧轴起点上下两行对齐,没有行间距*/

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

/*侧轴终点上下两行对齐,没有行间距,第一行依然在上*/

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

/*侧轴终点对齐,第一行依然在上,没有行间距*/

/*align-content:center;*/

/*两端对齐,中间自动分配*/

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

/*自动分配距离*/

align-content:space-around;

}

nav div {

width: 100px;

height: 100px;

background-color: lightcoral;

margin:10px;

}

</style>

</head>

<body>

<nav>

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<div>6</div>

<div>7</div>

<div>8</div>

<div>9</div>

<div>10</div>

<div>11</div>

<div>12</div>

<div>13</div>

</nav>

</body>

</html>justify-content设置弹性盒子元素在主轴(横轴)方向上的对齐方式

相关属性:

flex-star:t默认,顶端对齐

flex-end:末端对齐

center:居中对齐

space-between:两端对齐,中间自动分配

space-around:自动分配距离

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>justify-content</title>

<style>

nav {

height: 600px;

background-color: lightgoldenrodyellow;

display: flex;

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

/*主轴对齐,贴右 1234*/

/*justify-content: flex-end;*/

/*主轴对齐,居中*/

/*justify-content: center;*/

/*两端对齐,中间自动分配*/

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

/*自动分配距离*/

justify-content: space-around;

}

nav div {

width: 100px;

height: 100px;

background-color: lightblue;

margin:10px;

}

</style>

</head>

<body>

<nav>

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<div>6</div>

</nav>

</body>

</html>

弹性子元素属性

order设置弹性盒子的子元素排列顺序。 number排序优先级,数字越大越往后排,默认为0,支持负数。

flex-grow设置或检索弹性盒子元素的扩展比率。

flex-shrink设置或检索弹性盒子元素的收缩比率。

flex-basis用于设置或检索弹性盒伸缩基准值

flex设置弹性盒子的子元素如何分配空间,是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

align-self在弹性子元素上使用。覆盖容器的 align-items 属性。值与容器属性一样,只是这个是单独的设置某个元素。

总结


以上是前端之家为你收集整理的CSS3中的弹性盒子模型全部内容,希望文章能够帮你解决CSS3中的弹性盒子模型所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。