弹性盒子（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. asyncio与gevent并发性能测试

    asyncio与gevent并发性能测试 在对网站进行扫描或者暴破时需要对网站进行高并发操作,然而requests+concurrent多线程性能上不太理想,了解到python用得比较多的并发库有as ...

  2. Java API操作Hadoop可能会遇到的问题以及解决办法

    https://www.zifangsky.cn/1292.html Could not locate Hadoop executable: xxx\bin\winutils.exe   1 2 3 ...

  3. react 生命周期函数的一些心得体会

    一.理论 组件本质上是状态机,输入确定,输出一定确定 生命周期的三个阶段,三者时间是不固定的,只是在逻辑上的分类: 二.初始化阶段: getDefaultProps:获取实例的默认属性(即使没有生成实 ...

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

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

  5. react 组装table列表带分页

    2.组装编辑界面 /** * Created by hldev on 17-6-14. */ import React, {Component} from "react"; imp ...

  6. iOS-MPMoviePlayerController视频播放

    视频MPMoviePlayerController 在iOS中播放视频可以使用MediaPlayer.framework种的MPMoviePlayerController类来完成,它支持本地 视频和网 ...

  7. Azure AADSTS7000215 其中一种问题的解决

    众所周知,Azure提供了整套的rest api,经过认证和授权,完美阐述了”我是谁,我能做什么“.对资源层的操作,我们很多时候是使用Powershell或者Azure CLI或者各个语言的SDK, ...

  8. Vue项目过程中遇到的小问题

    1.给router-link添加点击事件 <router-link to="" @click.native=""></router-link& ...

  9. Spring Maven工程引入css,js

    1.CSS <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="t ...

  10. selenium + python 环境配置 （一）

    超级无敌菜鸟 终于有空学习一下python 和 selenium 啦 第一步: 环境配置  (Windows版) 1. 下载安装python 根据你的电脑,下载一个python吧   这儿装的是pyt ...