<!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. svn 备份脚本

    [root@hm-vpnserver-196 ~]# cat /root/svnback.sh #!/bin/bashtt=$(ls /home/svndata/) for i in $ttdo mk ...

  2. nginx 4层tcp代理获取真实ip

    举个例子,Nginx 中的代理配置假如是这样配置的: location / { proxy_http_version 1.1; proxy_set_header X-Real-IP $remote_a ...

  3. 如何在ROS中使用PCL（2）

    记录关于我们运行roslaunch openni_launch openni.launch  命令时生成的话题以及这些话题的数据类型便于后期的处理,只有知道它们的数据结构,才能很好的对数据进行处理,我 ...

  4. Error:不能将"char*"类型的值分配到"LPSTR"类型的实体 也许 "char*"类型的实参与"LPCWSTR"类型的形参不兼容

    http://www.myexception.cn/ruby-rails/1876106.html 选择“XXX项目”->“属性”->“配置属性”->“常规”选项中,把“使用 Uni ...

  5. 微信小程序——选中状态的切换

    加入购物车的时候,往往会有产品相关属性的选择,比如:尺寸,规格等.像我做的项目中,就有一个门店的选择,如下图: 我们如何做到当前点击的这个高亮呢?今天就讲一下如何实现这个功能. 思路: 1.定义一个高 ...

  6. $(window).height() 和 $(document).height()的区别

    $(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小,$(document).height()则代表了 ...

  7. 自然语言交流系统 phxnet团队 创新实训 个人博客 （十二）

    在本项目中关于天空盒子的使用的配置方法: 给场景添加天空盒  第二种方式   在菜单栏中选择:Edit->Render Setting,在保证不在选择场景中其它文件的前提下,Inspector面 ...

  8. 一些基本的操作，编译，构建，单元测试，安装，网站生成和基于Maven部署项目。

    一些基本的操作,编译,构建,单元测试,安装,网站生成和基于Maven部署项目. 使用Maven构建项目“mvn package” 来构建项目 使用Maven清理项目“mvn clean” 来清理项目 ...

  9. Ubuntu Server对OpenStack的支持

    关于Ubuntu上OpenStack版本选择的问题, 就看这里. 从12.04 LTS起, Ubuntu云存档允许用户在下一个LTS版的Ubuntu发布前安装更新的OpenStack. 就拿Ubunt ...

  10. poj 1700 Crossing River C++/Java

    http://poj.org/problem?id=1700 题目大意: 有n个人要过坐船过河,每一个人划船有个时间a[i],每次最多两个人坐一条船过河.且过河时间为两个人中速度慢的,求n个人过河的最 ...