web前端入门到实战：CSS3中的弹性盒子模型

分类：Flex作者：编程之家用户

介绍

在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>
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）
  • 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>
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）

弹性子元素属性

  • order

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

  • flex-grow

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

  • flex-shrink

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

  • flex-basis

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

  • flex

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

  • align-self

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

原文地址：https://blog.51cto.com/14592820/2467372

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

css display:flex 属性
一：display:flex布局display:flex是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵
display:flex 布局详解2
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现HTML代码：1<divclass="demo">2<divclass="inner">3<p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>4</div
移动端开发
移动端开发知识点pc端软件和移动端apppc端软件是什么，有哪些应用。常见的例子，比如360杀毒，photoShop，VisualStudioCode等等移动端app是什么，有哪些应用。常见的例子，比如手机微信，手机qq，手机浏览器，美颜相机等等PC端与移动端的区别第一：PC考虑的是浏览器的兼容性，移动端考
grid布局笔记
最近挺忙的，准备考试，还有其他的事，没时间研究东西，快周末了，难得学点东西，grid是之前看到的，很好奇，讲的二维的布局，看起来很方便，应该很适合移动端布局，所以今天抽时间学一学，这个当是笔记了。参考的是阮老师的博客。阮一峰：CSSGrid网格布局教程http://www.ruanyifeng.com/blog/2019/03/g
盒模型
display:flex;把容器设置为弹性盒模型（设置为弹性盒模型之后，浮动，定位将不会有效果）给父元素设置的属性：（1）display：flex---把容器设置为弹性盒模型。（2）flex-direction---设置弹性盒模型主轴方向默认情况下主
javascript – Flex禁用Safari键盘快捷键
我在网页上运行了一个Flex应用程序,我想使用Command←组合键在应用程序中触发某些操作.这在大多数浏览器上都很好,但在Safari上,浏览器拦截此键盘事件并导致浏览器“返回”事件.有没有办法,通过Flex或通过页面上的其他地方的JavaScript,我可以告诉Safari不要这样做？解决方法:简短的
flex布局，flex-item
flex布局，flex-item1<template>2<viewclass="container">3<viewclass="greentxt">4A5</view>6<viewclass="redtxt">7B8<
c# – 大屏幕多点触控交互式应用程序设计
我应该设计一个大型多点触控屏幕的应用程序.从大到大,我的意思是新闻广播员(大约55英寸及以上).该应用程序是一个交互式地图.我的问题是：开发应用程序的技术.我的第一个想法是在AdobeFlex中制作,但是HTML5也是如此……必须有一些非常棒的Java库用于触摸交互,但是在Windows平台上
左图有文字的一些CSS样式
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&quo
弹性盒模型：flex多行多列两端对齐，列不满左对齐
【1】需求：  【2】解决方案：最近遇到布局上要求item两端对齐，且最后一行在列不满的情况下要求左对齐，使用flex的justify-content:space-between;实现时发现最后一行不能左对齐，而是两端对齐方式。 不是项目上想要的效果#网上查了一些资料，有两种方法可以实现效果：**1.
AS3无法从Java发送的套接字解​​码AMF3对象
我有一个java套接字服务器,它在连接时将Animal对象发送到Flash客户端.对象发送方式如下：Amf3Outputamf3Output=newAmf3Output(SerializationContext.getSerializationContext());amf3Output.setOutputStream(userSocket.getOutputStream());amf3Output.writeObject(animal)
java – 在JBoss上使用Flex / BlazeDS的Client.Error.MessageSend问题
我正在开发一个Flex3.4应用程序,它通过最新版本的BlazeDS与JBoss-4.2.2服务器上运行的JavaEE后端进行交互.当我在Tomcat上从FlashBuilder4beta2运行Flex应用程序时,一切都很好,Flex应用程序能够进行所需的远程调用.但我的生产环境是在JBoss上,当我将应用程序移动到JBoss时(更
java – NetConnection.Call.Failed偶尔在Flex3 / Tomcat / BlazeDS / Spring中发生
我有一个非常大的问题.我使用Flex3/Tomcat/BlazeDS/Spring编写了一个大型应用程序,在本地开发时运行良好,当我部署到公共开发环境时很好,但是当部署到我们的测试环境时经常失败.当远程处理请求花费大量时间(超过20秒)时,故障似乎最常发生.在我的开发服务器上,错误发生,但仅
HTML5的Day1
弹性和布局display:flex在ie6,ie7不兼容状态，一般在pc用的比较少,在手机端所有的浏览器都是支持的控制子元素在父元素里面的位置关系display:flex是给父元素加的文档流是按照主轴排列，只要父元素加了flex,那么里面的子元素全部可以直接添加宽高主轴的方向
FLEX源码分析
FLEX2.0源码分析（一）https://www.jianshu.com/p/8bc4c5f4b19fFLEX源码分析二（网络监测swizzle）https://www.jianshu.com/p/ffb95f2cbda6FLEX源码分析三（网络监测记录FLEXNetworkRecorder）https://www.jianshu.com/p/66267dc922c5FLEX源码分析四（Systemlog）https://www.jianshu.
页面伸缩布局实例
1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title><itle>6<style>7*{8margin:0;9padding:0;10
弹性盒子圣杯布局
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&qu
flex与inline-flex
flex：将对象作为弹性伸缩盒显示inline-flex：将对象作为内联块级弹性伸缩盒显示两者都是使子元素们弹性布局，但是如果是flex，父元素的尺寸不由子元素尺寸动态调整，不设置时默认是100%，而inline-flex则会使父元素尺寸跟随子元素们的尺寸动态调整。
css实现手机端导航栏左右滑动
<html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>test<itle><stylemedia="screen">.tab-head{list-style-type:no
php – 查找位于指定距离之间的用户(使用用户的邮政编码)
有没有办法使用邮政编码找到径向距离？我的任务是搜索居住在指定距离内的所有用户.我知道用户的zipcodes.例如,距离当前位置25英里的用户.我有其他搜索类别,我正在使用mysql查询.我无法解决距离问题.我的后端是在PHP中Flex的前端和前端.对我来说最好的选择就是www.zip-codes.com
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot