弹性盒子（Flexible Box/filebox）是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

　　弹性盒子由弹性容器（父元素）和弹性子元素（可以一个或者多个）组合而成。弹性容器通过设置display属性的值为flex或者是inline-flex将其定义为弹性容器。

一、display:flex　

　　　　作用：让当前元素形成盒，控制子元素。

　　　　特点：弹性盒里的子元素，都是沿着主轴排列，默认情况下，主轴为X轴。弹性盒里的子元素都能直接添加宽高（不用在乎是块元素还是行内元素）。让弹性盒里的一个子元素左右上下居中，直接给子元素添加margin:auto ;就可。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    section{

        display: flex;

    }

    span{

        width: 100px;

        height: 100px;

        background-color: green;

        margin: auto;

    }

    </style>

</head>

<body>

   <section>

        <span></span>

   </section>

</body>

</html>

二、具有以下属性：

1、flex-direction　　　　    　　改变主轴的排列方向

　　属性值：

　　　　row　　　　　　  X为主轴

　　　　column　　　　　Y为主轴

　　　　row-reverse　　　在主轴反向排列

2、justify-content　　　　  主轴对齐方式

　　属性值：

　　　　flex-start　　　　  默认，顶端对齐

　　　　flex-end　　　　  末端对齐

　　　　center　　　　　  居中对齐

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

　　　　space-around　　 自动分配距离

3、align-items　　　　　　侧轴对齐方式

　　属性值：

　　　　flex-start　　　　  默认，顶端对齐

　　　　flex-end　　　　   末端对齐

　　　　center　　　　　   居中对齐

　　　　baseline和flex-start等效

4、flex-wrap　　　　　　   换行

　　属性值：

　　　　wrap　　　　　　 换行

　　　　nowrap　　　　　不换行

　　　　wrap-reverse　　 反向换行

5、allign-content　　　　　行与行之间对齐方式

　　属性值：

　　　　flex-start　　　　  默认，顶端对齐

　　　　flex-end　　　　   末端对齐

　　　　center　　　　　  居中对齐

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

　　　　space-around　　 自动分配距离

6、align-self　　　　　　   控制一个子元素（灵活元素）在侧轴的对齐方式

　　属性值：

　　　　auto　　　　　　 默认值。元素继承了它的父容器的align-items属性，如果没有父容器则为“stretch”

　　　　stretch　　　　　 元素被拉伸以适应容器

　　　　content　　　　　元素位于容器的中心

　　　　flex-start　　　　  元素位于容器的开头

　　　　flex-end　　　　   元素位于容器的结尾

7、order　　　　　　　　  排序（控制子元素的先后顺序，数值越大越向后排。可以为负）

8、flex:1　　　　　　　　  把剩余空间全部分配给当前元素（当然指的是分配主轴上的空间）

　　　　flex是一个复合属性,设置或者是检索弹性盒模型对象的子元素如何分配空间

　　　　新版盒模型

　　　　flex三个属性介绍：flex-grow:一个数字，规定项目相对于其它灵活的项目进行扩展的量

　　　　　　　　　　　　  flex-shrink:一个数字，规定项目将相对于其它灵活项目进行收缩的量

　　　　　　　　　　　　  flex-basis:项目长度

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    *{

        padding:0;

        margin:0;

        box-sizing: border-box;

    }

    #section1{

        width: 600px;

        height: 500px;

        background-color: aliceblue;

        margin: auto;

        display: flex;

        flex-direction: column;

        /* flex-direction: row-reverse; */

        flex-direction: row;             /*属性1*/

        justify-content: center;

        justify-content: space-around;   /*属性2*/

        align-items: baseline;

        align-items: flex-start;

        align-items: center;             /*属性3*/

        flex-wrap: wrap;                 /*属性4*/

        align-content: flex-end;

        align-content: center;          /*属性5*/

    }

   span{

        width: 100px;

        height:100px;

        background: orange;

        border-radius: 50%;

        font-size: 20px;

        color:white;

        text-align: center;

    }

   #section2{

       width: 600px;

       height: 400px;

       background-color: aliceblue;

       margin: 0 auto;

       display: flex;

       align-items: center;

   }

   div{

       width: 100px;

       height: 100px;

       background-color: antiquewhite;

       font-size: 20px;

       color:white;

       text-align: center;

   }

   div:nth-child(1){

       background-color: red;

       order: 3;                        /* 属性7 */

       flex:1;                           /* 属性8 */

   }

   div:nth-child(2){

       background-color: blue;

       /* align-self: flex-end;          属性6 */

       flex:1;

       border:10px solid green;

   }

   div:nth-child(3){

      flex:1;

   }

    </style>

</head>

<body>

    <section id="section1">

       <span>1</span>

       <span>2</span>

       <span>3</span>

       <span >4</span>

       <span>5</span>

       <span>6</span>

       <span>7</span>

    </section>

    <br>

    <section id="section2">

            <div>div1</div>

            <div>div2</div>

            <div>div3</div>

    </section>

</body>

</html>

　　案例1：骰子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        * {

            padding: 0;

            margin: 0;

            box-sizing: border-box;

        }

        html,

        body {

            height: 100%;

        }

        body {

            display: flex;

            justify-content: space-around;

            align-items: center;

            flex-wrap: wrap;

        }

        div {

            width: 100px;

            height: 100px;

            background-color: #e7e7e7;

            padding: 4;

            border-radius: 10px;

            box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;

        }

        span {

            display: block;

            width: 24px;

            height: 24px;

            background-color: black;

            border-radius: 12px;

            margin: 4px;

            box-shadow: inset 0 3px #111, inset 0 -3px #555;

        }

        div:nth-child(1) {

            display: flex;

            justify-content: center;

            align-items: center;

        }

        div:nth-child(2) {

            display: flex;

            justify-content: space-between;

        }

        div:nth-child(2) span:nth-child(2) {

            align-self: flex-end;

        }

        div:nth-child(3) {

            display: flex;

            flex-direction: column;

        }

        div:nth-child(3) span:nth-child(2) {

            align-self: center;

        }

        div:nth-child(3) span:nth-child(3) {

            align-self: flex-end;

        }

        div:nth-child(4) {

            display: flex;

            justify-content: space-between;

        }

        div:nth-child(4) p {

            display: flex;

            flex-direction: column;

            justify-content: space-between;

        }

        div:nth-child(5) {

            display: flex;

            justify-content: space-between;

        }

        div:nth-child(5) p {

            display: flex;

            flex-direction: column;

            justify-content: space-between;

        }

        div:nth-child(5) p:nth-child(2) {

            align-self: center;

        }

        div:nth-child(6) {

            display: flex;

            justify-content: space-between;

        }

        div:nth-child(6) p {

            display: flex;

            flex-direction: column;

            justify-content: space-between;

        }

    </style>

</head>

<body>

    <div>

        <span></span>

    </div>

    <div>

        <span></span>

        <span></span>

    </div>

    <div>

        <span></span>

        <span></span>

        <span></span>

    </div>

    <div>

        <p>

            <span></span><span></span>

        </p>

        <p>

            <span></span><span></span>

        </p>

    </div>

    <div>

        <p>

            <span></span><span></span>

        </p>

        <p>

            <span></span>

        </p>

        <p>

            <span></span><span></span>

        </p>

    </div>

    <div>

        <p>

            <span></span><span></span><span></span>

        </p>

        <p>

            <span></span><span></span><span></span>

        </p>

    </div>

</body>

</html>

css之弹性盒模型的更多相关文章

  1. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  2. 【css】弹性盒模型

    弹性盒模型flexBox 弹性盒模型是c3的一种新的布局模式 它是指一种当页面需要适应不同屏幕大小以及设备类型时,确保元素有恰当行为的布局方式. 引入弹性盒模型布局的目的是提供一种更有效的方法来对一个 ...

  3. 深入理解CSS弹性盒模型flex

    × 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...

  4. CSS弹性盒模型(flex box)

    本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...

  5. css和css3弹性盒模型实现元素宽度（高度）自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  6. 关于ie中实现弹性盒模型-我的css

    css3中的弹性盒模型大家都不陌生,但是能否在ie6中实现呢?第三方库中涉及到的页少之又少,也有一部分css框架中支持各种布局,下面给出我用的盒模型样式(为了以后copy方便而已): /******* ...

  7. CSS——弹性盒模型

    弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 这东 ...

  8. CSS弹性盒模型flex概念

    盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模型. 先说CSS的伸缩盒模型:flex模型是CSS3引入的新的布局模型,是flexible box的缩写,一般称之为弹性盒模型.和CSS ...

  9. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

随机推荐

  1. Java 8 Lambda表达式学习和理解

    Java 8 Lambda表达式和理解 说明:部分资料来源于网络 时间:20190704 Lambda 表达式,也可称为闭包,它是推动 Java 8 发布的最重要新特性.Lambda 允许把函数作为一 ...

  2. InfluxDB+Grafana大数据监控系列之数据源配置（二）

    一.Grafana 配置 InfluxDB 数据源 1.1 登录 Granfana 界面选择 InfluxDB 数据源 在前面我们已经部署好相应监控环境,登录Grafana:http://10.223 ...

  3. 使用 ServiceStack.Text 序列化 json

    相信做 .net 开发的朋友经常会遇到 json 序列化这样的需要,今天发篇文章总结下自己使用 ServiceStack.Text 来序列化 json.它的速度比 Newtonsoft.Json 快很 ...

  4. 【linux基础】如何开机自启动某个程序-linux工具-ubuntu

    前言 实际使用中应用程序或者服务需要开机自启动,而不是人为手动开启运行,那么,该如何做呢,本文对此进行介绍. 操作过程 1. 确定系统的桌面环境: 具体可参考here; 2. 如何自启动: 博主ubu ...

  5. react中，用key值来解决一些奇葩问题

    编辑用户信息,角色信息无法加载到值 改进之后:思路:由于值是设置在state里面的,界面编辑时,会重服务器拉去数据,值也设置在state里面了,但是CheckboxGroup依然不会去渲染选中的值, ...

  6. IDA7.2破解版本

    更新说明 https://www.hex-rays.com/products/ida/7.2/index.shtml 破解文章 作者阐述了一下对IDA安装密码的攻击方法,通过枚举多种语言默认的随机数发 ...

  7. 利用PHP应用程序中的远程文件包含（RFI）并绕过远程URL包含限制

    来源:http://www.mannulinux.org/2019/05/exploiting-rfi-in-php-bypass-remote-url-inclusion-restriction.h ...

  8. 【c# 学习笔记】析构函数

    析构函数 用于在类销毁之前释放类实例所使用的托管和非托管资源.对应c#应用程序所创建的大多数对象,可以依靠.net Framework的垃圾回收站(GC) 来隐式地执行内存管理任务.但若创建封装了非托 ...

  9. Flutter状态管理Provider，简单上手

    在之前的文章中介绍了 Google 官方仓库下的一个状态管理 Provide.乍一看这俩玩意可能很容易就被认为是同一个东西,仔细一看,这不就差了一个字吗,有什么区别呢. 首先,你要知道的最大的一个区别 ...

  10. 利用socket编程在ESP32上搭建一个TCP客户端

    通过之前http://www.cnblogs.com/noticeable/p/7636582.html中对socket的编程,已经可以知道如何通过socket编程搭建服务器和客户端了,现在,就在ES ...