<!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. Spring Cloud Sleuth Zipkin - (2)

    在上一节<spring-cloud-sleuth+zipkin追踪服务实现(一)>中,我们使用zipkin-server.provider.consumer三个程序实现了使用http方式进 ...

  2. 【Java集合源码剖析】HashMap源码剖析

    转载出处:http://blog.csdn.net/ns_code/article/details/36034955 HashMap简介 HashMap是基于哈希表实现的,每一个元素是一个key-va ...

  3. CentOS7安装google chrome浏览器

    1,下载离线包 rpm 2,rpm -ivh ** 报错: lsb_release被chrome依赖 libXss.so被chrome依赖 libappindicator3被chrome依赖 yum ...

  4. win7 64位操作系统中 Oracle 11g 安装教程（图解）

    1.下载Oracle 11g R2 for Windows版本,下载地址如下 官方网站: http://download.oracle.com/otn/nt/oracle11g/112010/win3 ...

  5. Android progressbar条形带背景渐变进度风格进度条

    效果图: 代码如下: <ProgressBar android:id="@+id/progressBar" style="?android:attr/progres ...

  6. Sword libcurl使用

    libcurl编译 >> ./configure --prefix=/opt/soft/curl --disable-ldap --disable-ldaps >> make ...

  7. SAP SD 顾问面试问题 consultant interview questionnaire

    以下是我个人目前面试团队 SD顾问问题的小结,希望对大家有所帮助, 也可能有回答错误的地方,希望同行不吝赐教. 也希望各位顾问们讲你们遇到的一些面试问题做个跟贴,方便大家共同进步,谢谢.   面试问题 ...

  8. iPhone开发中，关于视图跳转的总结（转）

    iPhone开发中,关于视图跳转的总结 iPhone开发中从一个视图跳到另一个视图有三种方法: 1. self.view addSubView:view .self.window addSubView ...

  9. Java如何合并两个数组？

    Java中,如何合并两个数组? 示例 本例展示了如何使用List类的List.Addall(array1.asList(array2))方法和Array类的Arrays.toString()方法将两个 ...

  10. update-alternatives常用命令(转自http://blog.csdn.net/baggio1006/article/details/6338623)

    Linux 发展到今天,可用的软件已经非常多了.这样自然会有一些软件的功能大致上相同.例如,同样是编辑器,就有 nvi.vim.emacs.nano,而且我说的这些还只是一部分.大多数情况下,这样的功 ...