<!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. python将dict中的unicode打印成中文

    import json a = {u'content': {u'address_detail': {u'province': u'\u5409\u6797\u7701', u'city': u'\u9 ...

  2. Graph-BFS-Fly-图的广度优先遍历-最小转机问题

    #include <iostream> #include <queue> using namespace std; /* 5 7 1 5 1 2 1 3 2 3 2 4 3 4 ...

  3. OAuth 授权

  4. 【转】两款 Web 前端性能测试工具

    前段时间接手了一个 web 前端性能优化的任务,一时间不知道从什么地方入手,查了不少资料,发现其实还是蛮简单的,简单来说说. 一.前端性能测试是什么? 前端性能测试对象主要包括: HTML.CSS.J ...

  5. [hadoop读书笔记] 第十五章 sqoop1.4.6小实验 - 将mysq数据导入hive

    安装hive 1.下载hive-2.1.1(搭配hadoop版本为2.7.3) 2.解压到文件夹下 /wdcloud/app/hive-2.1.1 3.配置环境变量 4.在mysql上创建元数据库hi ...

  6. 在C++中调用DLL中的函数（2）

    本文转自:http://blog.sina.com.cn/s/blog_53004b4901009h3b.html 应用程序使用DLL可以采用两种方式: 一种是隐式链接,另一种是显式链接.在使用DLL ...

  7. Python之cv2

    1.读取图片 import cv2 img = cv2.imread('./test.jpg') 读取出来的图片是numpy.ndarray格式,值是0-255, img的形状是 (图片高度,图片宽度 ...

  8. 【转】【WCF】WCF中客户端生成代理的两种方式

    WCF程序中客户端要生成代理才能调用服务,在客户端生成代理有多种方式,如用ChannelFactory和添加服务引用等.下面就分别来介绍下这两种生成代理的方式. 使用ChannelFactory 使用 ...

  9. (笔记)电路设计（十一）之DC/DC电源转换方案设计应用

    十大 法则之一:搞懂什么是DC/DC电源以及DC/DC转换电路分类 DC/DC电源电路又称为DC/DC转换电路,其主要功能就是进行输入输出电压转换.一般我们把输入电源电压在72V以内的电压变换过程称为 ...

  10. Android WiFi 日志记录(四次握手)

    记录一下四次握手的log. PMK: PMK(Pairwise Master Key,成对主密钥 STA和AP得到PMK后,将进行密匙派生以得到PTK.最后,PTK被设置到硬件中, 用于数据的加解密. ...