<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

  .flex-container {

    display: flex;

    height: 400px;

    background-color: gray;

  }

  .flex-item {

    background-color: green;

    width: 100px;

    height: 100px;

    margin: 5px;

    /*flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto*/

    /*flex: auto即flex:1 1 auto;各个子盒子均等分*/

    /*flex: auto;*/

    /*flex: none即flex:0 0 auto;子盒子将不具有伸缩性*/

    /*flex:none;*/

  }

	/*flex:[number],子盒子按比例分割*/

  .flex-item:nth-child(1) {

    flex: 2

  }

  .flex-item:nth-child(2) {

    flex: 1

  }

  .flex-item:nth-child(3) {

    flex: 1

  }

  </style>

</head>

<body>

  <div class="flex-container">

    <div class="flex-item">flex item 1</div>

    <div class="flex-item">flex item 2</div>

    <div class="flex-item">flex item 3</div>

  </div>

</body>

</html>

flexbox子盒子flex属性的更多相关文章

  1. flexbox子盒子align-self属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. flexbox子盒子order属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. flexbox父盒子align-content属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. flexbox父盒子flex-wrap属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. flexbox父盒子align-items属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. flexbox父盒子justify-content属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. flexbox父盒子flex-direction属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. CSS 弹性盒子 flex的三个属性：grow、shrink、basis

    flex-grow 首先介绍flex-grow属性,flex-grow会在容器太大时(图片A.B的宽度和 < 父容器宽度)对元素作出调整. 如果图片A的flex-grow属性的值为 1,图片B的 ...

  9. CSS3 -- FlexBox(弹性盒子)

    盒子模型 CSS中有一种基础设计模式叫盒模型,盒模型定义了Web页面中的元素如何来解析. 在盒模型中主要包括width.height.border.background.padding和margin这 ...

随机推荐

  1. nvalid bound statement (not found)

    问题详情: org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.coocaa.te ...

  2. 《FPGA全程进阶---实战演练》第九章 计数器要注意

    本小节我们来做一个好玩的事情,就是计数器,还记得在做LED自加实验时我们就曾经提到过关于计数器的相关议题,那么这节我们就来讨论讨论. 探讨一下如下的问题:请用verilog记八个数的写法,分析这个可以 ...

  3. Windows IOT 开发入门（准备工作）

    终于抽出空来了,将最近研究的东西记录下来,物联网,万物皆可联网.然后可以做到智能家居,智能生活,智能城市....一大堆.吹牛的就不说了. 在实际应用中都是一个个小的传感器在收集数据,同时把数据直接或者 ...

  4. VIM中 文件的打开与保存

    用 :edit 命令打开一个文件 :edit + {filename}           就可以打开一个文件到缓冲区中, 并且可以加文件路经的: 在路经中, %表示当前文件的完整路经, 用:h 可以 ...

  5. 第三百九十一节，Django+Xadmin打造上线标准的在线教育平台—404，403，500页面配置

    第三百九十一节,Django+Xadmin打造上线标准的在线教育平台—404,403,500页面配置 路由映射在全局也就是根目录里的urls.py里配置404路由映射 注意:不是写在urlpatter ...

  6. Java如何使用线程解决死锁？

    在Java编程中,如何使用线程解决死锁? 以下示例演示如何使用线程的概念解决死锁问题. // from W w w .Y I I b AI.c o M package com.yiibai; impo ...

  7. 采用MiniProfiler监控EF与.NET MVC项目

    今天来说说EF与MVC项目的性能检测和监控 首先,先介绍一下今天我们使用的工具吧. MiniProfiler~ 这个东西的介绍如下: MVC MiniProfiler是Stack Overflow团队 ...

  8. C#提高-------------------Module的使用

    如果没有看<C#反射(一)>.建议先看<C#反射(一)>再看这一篇.上一篇文章发表,有人评论我所写的东西比较基础.其实我也知道我也只不过是在写最基础的语法而已,之所以写它是因为 ...

  9. 数据库事物用法 SET XACT_ABORT ON

    数据库事物的用法和作用就不再重复,写一下在实战当中遇到的问题,代码如下: begin tran --开始执行事务     --语句一 update  set acount = acount-100 w ...

  10. C# 获取web.config配置文件

    .ConfigurationManager提供对客户端应用程序配置文件的访问. 其有两个属性1.ConnectionStrings 获取当前应用程序默认配置的 ConnectionStringsSec ...