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布局实战的更多相关文章

  1. 「小程序JAVA实战」小程序的flex布局(22)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...

  2. css3 flex 布局

    今天做一个小实战,需要让一个登录框始终保持水平和垂直居中,第一个想到的就是通过定位(要想让一个div居中,采用定位可以解决,示例), 然后开始接触flex布局,学完感觉真的好用,现把知识点记录一下,以 ...

  3. 30分钟彻底弄懂flex布局

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由elson发表于云+社区专栏 目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布 ...

  4. CSS3 Flex布局(伸缩布局盒模型)学习

    CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...

  5. css 弹性盒模型Flex 布局

    参考文章:http://www.runoob.com/w3cnote/flex-grammar.html Flex 布局是什么:采用Flex布局的元素,称为Flex容器(flex container) ...

  6. 微信小程序CSS之Flex布局

    转载:https://blog.csdn.net/u012927188/article/details/83040156 相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆 ...

  7. Flex 布局教程:语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  8. Flex 布局教程:实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  9. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

随机推荐

  1. 123457123456#0#-----com.yuming.HitMouse01--前拼后广--幼儿打地鼠游戏

    com.yuming.HitMouse01--前拼后广--幼儿打地鼠游戏

  2. ElasticSearch——路由(_routing)机制

    前言 一条数据是如何落地到对应的shard上的? 当索引一个文档的时候,文档会被存储到一个主分片中. Elasticsearch 如何知道一个文档应该存放到哪个分片中呢? 首先这肯定不会是随机的,否则 ...

  3. (八)Centos之文件搜索命令locate

    一.文件搜索命令locate locate优点是 搜索速度快 ,缺点是只能按文件名搜索: 1.1 新建一个文件   1.2 更新数据库 locate命令搜索的是 /var/lib/mlocate 下的 ...

  4. 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置

    处理[由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面] 详细错误:HTTP 错误 404.2 - Not Found. 由于 Web 服务器上的“ISAPI 和 ...

  5. 如何禁用maven下载进度指示?

    方法 mvn -B ..或者mvn --batch-mode ...

  6. 【c# 学习笔记】封装

    封装 指的是把类内部的数据隐藏起来,不让对象实例直接对其操作.c#中提供了属性机制来对类内部的状态进行操作. 在c#中,封装可以通过Public.Private.Protected和Internal等 ...

  7. Egret入门学习日记 --- 第八篇(书中 2.0~2.6节 内容)

    第八篇(书中 2.0~2.6节 内容) 好!开始把前三章的内容录入进来. 但是!由于第一章说的内容都是在介绍白鹭引擎的背景信息,我就不在日记中写了. 直接开始从第二章写起. 2.0节 中提到了IDE( ...

  8. 最新 腾讯java校招面试题(含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.腾讯等10家互联网公司的校招Offer,因为某些自身原因最终选择了腾讯.6.7月主要是做系统复习.项目复盘.LeetCode ...

  9. Ant 构建 Jmeter脚本报错详解

    在搭建Ant构建Jmeter脚本的时候,小组成员遇到了各种问题. 再这里总结一下,遇到类似问题的可以做个参考 1.提示 does not exist 解决方案: 出现这种的问题原因有很多. 先排除权限 ...

  10. Qt 和 Boost关于信号和槽的对比说明

    对比 无论是 Qt 的实现方式还是 Boost 的实现方式,除了必须的定义信号和槽的类之外,都不需要额外的类. 两种实现都解决了类爆炸的问题.下面让我们对照着来看一下我们前面的分析. 两个不同的术语以 ...