flex布局实战
1.实现盒子的水平垂直居中
.parent{
width:200px;
height:200px;
display:flex;
align-items: center;
justify-content: center;
border:1px solid black;
}
.child{width:100px;height:100px;background:yellowgreen}
<div class="parent">
<div class="child">
</div>
</div>
2.子元素水平排列一行,均分父元素宽度(如果采用百分比实现,当子元素个数变化时需要修改样式,用flex布局则不需要)
.box{
width:400px;
display:flex;
border:1px solid black;
}
.child{ margin:10px;flex:;background:yellowgreen}
<div class="box">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
3.左侧固定宽度,右侧宽度随父容器宽度变化而变化布局
.box{
/* width:500px; */
display:flex;
border:1px solid black;
}
.left{
width:100px;
background:blue;
}
.right{
flex:;
background:yellowgreen;
}
<div class="box">
<div class="left">1</div>
<div class="right">2</div>
</div>
flex布局实战的更多相关文章
- 「小程序JAVA实战」小程序的flex布局(22)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...
- css3 flex 布局
今天做一个小实战,需要让一个登录框始终保持水平和垂直居中,第一个想到的就是通过定位(要想让一个div居中,采用定位可以解决,示例), 然后开始接触flex布局,学完感觉真的好用,现把知识点记录一下,以 ...
- 30分钟彻底弄懂flex布局
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由elson发表于云+社区专栏 目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布 ...
- CSS3 Flex布局(伸缩布局盒模型)学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
- css 弹性盒模型Flex 布局
参考文章:http://www.runoob.com/w3cnote/flex-grammar.html Flex 布局是什么:采用Flex布局的元素,称为Flex容器(flex container) ...
- 微信小程序CSS之Flex布局
转载:https://blog.csdn.net/u012927188/article/details/83040156 相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆 ...
- Flex 布局教程:语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- Flex 布局教程:实例篇
该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...
- 在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
随机推荐
- 123457123456#0#-----com.yuming.HitMouse01--前拼后广--幼儿打地鼠游戏
com.yuming.HitMouse01--前拼后广--幼儿打地鼠游戏
- ElasticSearch——路由(_routing)机制
前言 一条数据是如何落地到对应的shard上的? 当索引一个文档的时候,文档会被存储到一个主分片中. Elasticsearch 如何知道一个文档应该存放到哪个分片中呢? 首先这肯定不会是随机的,否则 ...
- (八)Centos之文件搜索命令locate
一.文件搜索命令locate locate优点是 搜索速度快 ,缺点是只能按文件名搜索: 1.1 新建一个文件 1.2 更新数据库 locate命令搜索的是 /var/lib/mlocate 下的 ...
- 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置
处理[由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面] 详细错误:HTTP 错误 404.2 - Not Found. 由于 Web 服务器上的“ISAPI 和 ...
- 如何禁用maven下载进度指示?
方法 mvn -B ..或者mvn --batch-mode ...
- 【c# 学习笔记】封装
封装 指的是把类内部的数据隐藏起来,不让对象实例直接对其操作.c#中提供了属性机制来对类内部的状态进行操作. 在c#中,封装可以通过Public.Private.Protected和Internal等 ...
- Egret入门学习日记 --- 第八篇(书中 2.0~2.6节 内容)
第八篇(书中 2.0~2.6节 内容) 好!开始把前三章的内容录入进来. 但是!由于第一章说的内容都是在介绍白鹭引擎的背景信息,我就不在日记中写了. 直接开始从第二章写起. 2.0节 中提到了IDE( ...
- 最新 腾讯java校招面试题(含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.腾讯等10家互联网公司的校招Offer,因为某些自身原因最终选择了腾讯.6.7月主要是做系统复习.项目复盘.LeetCode ...
- Ant 构建 Jmeter脚本报错详解
在搭建Ant构建Jmeter脚本的时候,小组成员遇到了各种问题. 再这里总结一下,遇到类似问题的可以做个参考 1.提示 does not exist 解决方案: 出现这种的问题原因有很多. 先排除权限 ...
- Qt 和 Boost关于信号和槽的对比说明
对比 无论是 Qt 的实现方式还是 Boost 的实现方式,除了必须的定义信号和槽的类之外,都不需要额外的类. 两种实现都解决了类爆炸的问题.下面让我们对照着来看一下我们前面的分析. 两个不同的术语以 ...