CSS3中的弹性盒子模型

更新日期: 2019-08-24阅读: 2k标签: 模型

介绍

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-flow

flex-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 属性。值与容器属性一样,只是这个是单独的设置某个元素。

链接: https://fly63.com/article/detial/4911

CSS3 box-sizing 属性 有趣的盒模型

盒模型的组成大家肯定都懂,由里向外content,padding,border,margin.盒模型是有两种标准的,一个是标准模型,一个是IE模型。盒模型的宽高只是内容(content)的宽高,而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。

PHP下用Swoole实现Actor并发模型

Actor对于PHPer来说,可能会比较陌生,写过Java的同学会比较熟悉,Java一直都有线程的概念(虽然PHP有Pthread,但不普及),它是一种非共享内存的并发模型,每个Actor内的数据独立存在

Three.js模型几何体面积、体积计算

在工作中通过Three.js开发项目的时候,一些特定的情况下你可能需要计算一个三维模型的表面积或者体积,比如在3D打印的Web项目中,你需要计算一个三维模型的体积

CSS层模型的应用

如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来(即不依赖与前面的一个DIV的位置可以独立设置位置)

CSS盒子模型与怪异盒模型

盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分。盒子模型分为两种 第一种是W3c标准的盒子模型(标准盒模型)

CSS盒子模型

什么叫框模型?页面元素皆为框(盒子),定义了元素框处理元素内容,内边距,外边距以及边框的计算方式。外边距围绕在元素边框外的空白距离(元素与元素之间的距离),语法:margin,定义4个方向的外边距

浏览器事件模型

我想你很可能听说过事件驱动, 但是事件驱动到底是什么?为什么说浏览器是事件驱动的呢?为什么 NodeJS 也是事件驱动的 ? 两者是一回事么?实际上不管是浏览器还是 Nodejs 都是事件驱动的

css盒模型

盒模型:box-sizing;标准盒模型: content-box 宽高即为content的宽高;IE盒模型:border-box 宽高为content+padding+border;dom.style.width/height 只能获取内联样式设置的宽高

盒模型大小取决于它的padding,margin,border数值

盒模型规定了元素框处理元素内容width与height值、内边距padding、边框border 和 外边距margin 的数值大小。边框内的空白是内边距padding,边框外的空白是外边距margin,如下所示,这个盒模型元素框的宽度值=内容区域的宽度+2(内边距+外边距+边框)

JavaScript执行模型

JavaScript是一个单线程(Single-threaded)异步(Asynchronous)非阻塞(Non-blocking)并发(Concurrent)语言,这些语言效果通过一个调用栈(Call Stack)、一个事件循环(Event Loop)、一个回调队列

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!