flex容器属性和项目属性的实际应用_高度补全

一个高度为100px, 另外一个高度自动补全当前界面下剩余的高度:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body,.box{
            height:100%;
        }
        body{
            margin:0;

        }
        .box{
            display:-webkit-flex;
            -webkit-flex-direction: column;
            display:flex;
            flex-direction:column;
        }
        .box .child{
            height:40px;
            background:#f00;
        }
        .box .child1{
            flex:1;
            background:#0f0
        }
    </style>
</head>
<body>
<div class="box">
    <div class="child">child</div>
    <div class="child1">child1</div>
</div>
</body>
</html>
时间: 2024-10-12 13:27:30

flex容器属性和项目属性的实际应用_高度补全的相关文章

flex布局,一排,多排,项目属性

flex布局 阮一峰 display:flex;横排 行内元素也可以使用Flex布局. Webkit内核的浏览器,必须加上-webkit前缀. 注意,设为Flex布局以后,子元素的float.clear和vertical-align属性将失效. 容器默认存在两根轴: 水平的主轴(main axis)和垂直的交叉轴(cross axis). 主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end: 交叉轴的开始位置叫做cross start,结束位置叫做cross

flex弹性盒模型(容器块上的属性)

容器块上的属性: flex-direction:决定主轴方向 值row:(默认值)主轴为水平方向,起点在左端 row-reverse:水平方向,起点在右端 colum:垂直方向,起点在上沿 column-reverse:垂直方向,起点在下沿 flex-wrap:换行规则 值nowrap(默认值)不换行 wrap:换行,第一行在上方 wrap-reverse:换行,第一行在下方 justify-content:设置项目在主轴上的对齐方式 值conter居中 fle-start:从起点开始排序 fl

原创:新手布局福音!微信小程序使用flex的一些基础样式属性

来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能使用不同以往的居中方式并减少css的相关样式声明. 先来看看关于flex的一张图: 从上面可以看到一些flexbox的相关信息, main axis 和 cross axis 指的是flexbox内部flex项目(flex item)的排列方向,通俗点说就是,里面的flex项目是按照横轴或者纵轴排列的顺

Spring Boot项目属性配置

接着上面的入门教程,我们来学习下Spring Boot的项目属性配置. 1.配置项目内置属性 属性配置主要是在application.properties文件里配置的(编写时有自动提示)这里我们将server的端口变为8888,路径加上HelloWorld: 在DeomApplication.java的页面时点击运行按钮,打开浏览器输入:http://localhost:8888/HelloWorld/hello 此时,控制台的输出信息也可以看到端口变成8888了: 之前的url已无效: 更改后

VS项目属性配置实验过程

一.实验背景 cocos2d-x已经发展的相对完善了,从项目的创建.编译.运行到最后的打包都有相应的便捷工具,开发者只需要关注自己的游戏逻辑代码即可,这一点很赞,可是傻瓜式的编程,让我至今还只停留在使用vs建个空项目做个小demo的阶段,我根本不知道cocos2d-x项目究竟是如何组织的,那些项目与项目之间的关系,那些库文件的引用,那些属性的配置,那些路径设置,那些宏定义究竟是在哪里,为什么会出现两个窗口,一大片属性究竟是什么意思,,所以很有必要研究一下.现在把实验过程同大家交流一下,有什么说的

【转】VS项目属性的一些配置项的总结

首先,解决方案和项目文件夹包含关系(c++项目): VS解决方案和各个项目文件夹以及解决方案和各个项目对应的配置文件包含关系,假设新建一个项目ssyy,解决方案起名fangan,注意解决方案包括项目,此时生成的最外层目录为fangan代表整个解决方案的内容都在这个文件夹内.在这个fangan文件夹内包含有fangan.sln的解决方案配置文件和一个ssyy文件夹,ssyy文件夹代表整个ssyy项目的所有内容都在这个文件夹内,这个文件夹内含有ssyy.vcproj的项目配置文件和.h头文件以及.c

【转】 vs2010项目属性配置

vs2010使用方案管理项目,一个解决方案下可包含多个项目. 默认情况下,项目属性的设置的目录起点为项目配置文件所在的位置,实际上就是项目头文件和源文件所在的位置. vs2010中默认建立C++项目,则解决方案总目录下包含一个sln和一个项目文件夹,在vs2010编译器中生成debug和release解决方案后,总目录下还会生成对应的debug和release目录,存放最终生成的exe或dll文件,同时也会在项目文件夹下生成debug和release目录(存放的是中间编译文件obj). 下面结合

[Visual Studio]项目属性中继承的值怎么删除

遇到一个问题,莫名奇妙编译,却出错"找不到包含文件<winapifamily.h>",之前从没出过问题啊!百思不得其解. 研究包含winapifamily的位置,发现有一个宏 WINAPI_FAMILY作为这个包含的开关.再看工程设置,发现预处理器定义中有这个宏定义.其他正常的项目没有. 进一步发现,这个预处理器定义是被继承的.此时,问题变成了:如何删除继承的定义?在项目属性中这个是不可操作的. 方法如下:打开属性管理器,在属性管理器中可以看到所有项目继承了的配置,其中有一

微软ASP.NET站点部署指南(4):配置项目属性

1.  综述 有些部署设置可以在项目属性里设置的,并且保持到项目文件里(.csproj或.vbproj). 大多数情况下,你都可以在Visual Studio 选择项目属性Project Properties,在属性窗口里设置这些参数.该章节将告诉你如何设置这些参数. 2.  项目属性窗口里配置部署参数 影响项目部署的设置参数可以在项目属性(Project Properties)窗口的Package/Publish 选项卡里设置.可以对不同的build配置设置不同的参数值,本章节将指导你查看这些