弹性盒子（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. window.open()详解及浏览器兼容性问题示例探讨

    这篇文章主要介绍了window.open()的使用及浏览器兼容性问题方面的知识,感兴趣的朋友可以参考下   一.基本语法: window.open(pageURL,name,parameters) 其 ...

  2. 26 Flutter仿京东商城项目 购物车之 event_bus事件广播 事件监听

    event_bus 介绍 在前面的课程我们给大家讲过状态管理 Provider 的使用. 通俗的讲状态管理就是:当我们想在多个页面(组件/Widget)之间共享状态(数据),或 者一个页面(组件/Wi ...

  3. linux下nginx结合keepalived实现主从切换的配置

    linux下nginx结合keepalived实现主从切换的配置   解决方法: 实现一个主nginx宕机,请求转到另一个nginx中. 1.确保两台nginx已启动,假如端口分别是192.168.0 ...

  4. java导入excel很完美的取值的方法

    java导入excel很完美的取值的方法   1.解决方法: /**    * 获取单元格数据内容为字符串类型的数据    * @param cell Excel单元格    * @return St ...

  5. Ubuntu下配置LVS【h】

    以后服务器只用CentOS和Ubuntu.下午用redhat装个lvs装了一下午都没搞好,TNND的.果断用Ubuntu,不到两个小时就搞定了. 原文参见: http://kamengwang.blo ...

  6. 第一篇博客==>Hello_World

    1,为什么写博客? 大佬都说程序员需要写博客的说,被无数到的大佬帮我洗脑之后,慢慢也发现了写博客的好处,写博客我认为主要有以下几个作用: 1.打开博客,记录世界记录你.emmm 2.可以把自己的一些经 ...

  7. 数据结构与算法学习(二)——Master公式及其应用

    本篇文章涉及公式,由于博客园没有很好的支持,建议移步我的CSDN博客和简书进行阅读. 1. Master公式是什么? 我们在解决算法问题时,经常会用到递归.递归在较难理解的同时,其算法的复杂度也不是很 ...

  8. 最新 拉卡拉java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.拉卡拉等10家互联网公司的校招Offer,因为某些自身原因最终选择了拉卡拉.6.7月主要是做系统复习.项目复盘.LeetCo ...

  9. Asp.Net文件的上传和下载

    aspx页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="上传和下载文件. ...

  10. springboot和solr结合测试使用

    首先新建springboot项目 新建webapp目录 springboot没有webapp目录——手动添加 web.xml <?xml version="1.0" enco ...