<!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. JavaScript：数据类型

    JavaScript中数据类型分为两种: 1.基本数据类型 string number boolean null undefined 2.引用类型 数组.Object.function 一.基本数据类 ...

  2. Lucene增删改查

    IndexManager.java package com.witwicky.lucene; import java.io.File; import java.util.ArrayList; impo ...

  3. js实例属性和原型属性

    <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <t ...

  4. ryu学习笔记（2） 之 ryu-manager运行报错

    http://blog.csdn.net/haimianxiaojie/article/details/48769653 ryu在使用的时候最常出现的报错是:address already in us ...

  5. Semantic segmentation using adversarial networks

    FAIR Paris分部的论文,NIPS2016 Workshop. Motivation是让predict出来的结果和真实label在高层感觉上有一致性. 基本思想就是用GAN来区分segmenta ...

  6. 文本编辑工具（sublime text 2）

    学习地址: http://www.iplaysoft.com/sublimetext.html 下载地址:http://www.sublimetext.com

  7. Jquery Gritter set position

    You can try... //css .gritter-center{ position:fixed; left:33%; right:33%; top:33% } //Javascript $. ...

  8. iptables filter表小案例

    案例1:把80端口,22端口,21端口放行 22端口指定IP访问,其它IP拒绝. shell脚本实现: [root@centos7 ~]# vim /usr/local/sbin/iptables.s ...

  9. 图解HTTP学习笔记——确认访问用户身份的认证

    前言 认证功能能让Web页面只被有权限的人访问.而认证机制究竟是怎样一个原理呢?通过今天的学习能对这个有个大致的了解. 正文 什么是认证 计算机无法判断对方的身份,需要客户端自报家门. 服务端为确认客 ...

  10. RMAN：简单的duplicate创建新数据库 for 12c+

    构建参数文件 *.db_name='test2' ##### 需要注意的地方,和rman的duplicate目标库一致 *.compatible='18.0.0' ##### 关键的地方,每个版本的模 ...