【CSS3基础-Flex布局】
关于Flex
背景
在flex布局出现以前,常用的水平和垂直居中对齐方式有很多。flex布局的出现基本规范了这一过程。
通过justify-content和align-items两个属性即解决了水平居中、垂直居中、水平垂直混合居中的问题。
display:flex
应用在父元素的属性
- flex-flow:flex-direction flex-wrap;
- align-items;
- justify-content;
- align-content(多行模式)
flex-flow
align-items
- stretch
align-items默认值为stretch。其含义即如果指定侧轴宽度未定义或auto时,所有子项目边距盒的宽度伸缩尽可能接近行宽度。这里的行宽度不一定由子项本身,而是由同级某个最大宽度子项宽度所决定。
// 可以实现不同大小的图片显示固定高度
<div class="imgs">
<div class="wrapper">
<img>
</div>
<div class="wrapper">
<img>
</div>
</div>
.imgs{
display: flex;
align-items: stretch;
}
.imgs .wrapper img{
height: 100%; // 使用flex后 直接设置高度100%可生效,不用一层一层向下传递
}
应用在子元素的属性
- flex: flex-grow flex-shrink flex-basis;
- align-self 默认继承自父元素align-item,父元素无时默认为stretch;
- order 对子项进行排序 正序排列;
定位后的flex子项
定位后的flex子项不再继承flex属性,但是其内部依旧可以使用flex布局。
【CSS3基础-Flex布局】的更多相关文章
- CSS3:flex布局应用
想把先前的整理的东西贴出来,怎奈总是有额外事情发生,额,教训电脑要离水杯远点~~ 推荐一本书,<编写可维护的Javascript>这是Nicbolas C.Zakas写的,他的<Ja ...
- [Css] css3的flex布局
flex思维导图 {"name":"flex","children":[{"name":"传统布局方式&quo ...
- 第103天:CSS3中Flex布局(伸缩布局)详解
一.Flex布局 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ display: flex; } 行 ...
- CSS3之flex布局
若要使用flex布局,需在父元素上声明" display : flex ",这样它所有的直系子元素就成为flex元素 1.居中 1)垂直居中:align-items : cente ...
- CSS3的flex布局
flex的一些属性 CSS3中引入了另一种框--flexbox,flexbox有一些block和inline不同的性质,比如: 自适应子元素(flex item,又称伸缩项目)的宽度 伸缩项目的flo ...
- 使用css3的Flex布局实现列表展示
实现效果图如下: 通过css3样式实现(部分代码): .box { display: flex; flex-wrap:wrap; justify-content:space-between; alig ...
- CSS3弹性伸缩布局(二)——flex布局
上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...
- CSS3 Flex布局整理(一)
一.说明 1.在以往的布局方案中,都是基于盒装模型,依赖display属性+position属性+float属性等. 他对于那些特殊布局非常不方便,比如,垂直居中等. 并且不同浏览器的盒模型还有些差异 ...
- CSS3弹性盒模型,Flex布局教程
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...
随机推荐
- Maven学习总结(二):安装
一:Maven下载 下载地址:http://maven.apache.org/download.cgi 下载完成后,得到一个压缩包,解压,可以看到maven的组成目录 Maven目录分析 bin:含有 ...
- vue指令示例合集
vue所有指令练习合集.这是个html文件,用chrome打开可查看结果. <!DOCTYPE html> <html lang="en" xmlns:v-on= ...
- HTTP(S)网络框架的设计
0.麻烦 操作系统提供的网络接口都会令人不爽,要么太接近底层而使用不便,要么层次过高又不提供底层点的接口供设置参数.但是我们不能期望系统API做得很高级,因为没有绝对合适的网络库,必须定制化从而达到适 ...
- 剑指Offer-编程详解-二维数组中的查找
题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...
- Android LinkedList和ArrayList的区别
LinkedeList和ArrayList都实现了List接口,但是它们的工作原理却不一样.它们之间最主要的区别在于ArrayList是可改变大小的数组,而LinkedList是双向链接串列(doub ...
- android 原生 MediaPlayer 和 MediaCodec 的区别和联系(三)
目录: (4)Android 官方网站 对 MediaCodec的介绍 注:编解码器特定数据(Code-specific Data,简写为csd) 部分结合网上资料加入了补充和个人理解.请悉知 ...
- PRINCE2是什么意思?
PRINCE2是一种长期以来公认的项目管理方法,在英国公共部门广泛应用,在私营企业界也发展成为事实上的应用方法. PRINCE2开发于1989年,是一种结构性的项目管理方法,其所有者OGC(英国商务部 ...
- Python进阶内容(一)--- 高阶函数 High order function
0. 问题 # 本文将围绕这段代码进行Python中高阶函数相关内容的讲解 # 文中所有代码的兼容性要求为:Python 3.6,IPython 6.1.0 def addspam(fn): def ...
- Java和C# RSA加解密相互通信和使用公钥加密传输
关于JAVA和C#加解密通讯的话,可以用这个BouncyCastle插件,会帮助你解决很多问题 http://www.bouncycastle.org/ //c#使用java给的公钥进行rsa加密 p ...
- [翻译] FLAnimatedImage
FLAnimatedImage FLAnimatedImage is a performant animated GIF engine for iOS: FLAnimatedImage是一个播放gif ...