<!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. mysql国内镜像下载网址

    http://mirrors.sohu.com/mysql/ http://mirrors.ustc.edu.cn/mysql-ftp/Downloads/ 开源镜像站点汇总 http://segme ...

  2. 【嵌入式】——arm裸机开发 step by step 之 按键控制 LED 和 蜂鸣器

    一.arm-9 TQ2440 key.h #ifndef __KEY_H__ #define __KEY_H__ #define GPFCON (*(volatile unsigned long *) ...

  3. java replaceall 使用正则表达式替换单等号，不替换其他相关的等号。

    写项目需要将公式配置到数据库中,取出后根据公式规则进行比较,由于公式的等于是用单等号,在java中无法直接使用,故需要将单等号替换成双等号,单又不能影响大于等于以及其他形式.故果断选择正则表达式替换. ...

  4. mybatis中的#{}和${}区别

    mybatis中的#{}和${}区别 2017年05月19日 13:59:24 阅读数:16165 1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #use ...

  5. R语言-分组统计

    分组统计 1.假定有一组成绩数据,要求根据性别进行分组统计: > score    ID   score1 score2 Gender1  101 11.35321    0.9   male2 ...

  6. Python之输出当前时间

    import time print time.strftime('%Y-%m-%d %H:%M:%S', time.localtime(time.time()))

  7. Axiom3D:Buffer漫谈

    在前面数据绑定基本流程,简单说了下,在Axiom中,数据从我们C#的托管环境到下面的OpenGL或是D3D的非托管环境,有个转化过程,相关实现我们可以从BufferBase看起.BufferBase与 ...

  8. 用Python中的tkinter模块作图

    tkinter 可以用来创建完整的应用程序,比如简单的字处理软件,还有简单的绘图软件. 一.创建一个可以点的按钮 用tkinter创建一个带按钮的简单程序,代码如下: >>> fro ...

  9. UltraCompare 激活

    UltraCompare安装包.注册机下载地址: 链接:https://pan.baidu.com/s/1eSu8Pbk 密码:fkkh 1.安装UltraCompare 2. 3. 打开注册机,填入 ...

  10. PHP + Smarty + html5 构建Wap应用

    一 简介     Smarty是一个PHP编写的模板引擎(template engine),主要用于构建web应用程序的表示层.Smarty的主页是http://www.smarty.net/down ...