【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的弹性盒模型 ...
随机推荐
- Freebsd10.3(FreeBSD11 Beta1)使用手记
Freebsd10.3(FreeBSD11 Beta1)使用手记 1.安装系统. 2.设置ssh2登录,并开启ftp. (1)编辑/etc/ssh/sshd_config文件,设置如下: Permit ...
- drupal中安装CKEditor文本编辑器,并配置图片上传功能 之 方法二
drupal中安装CKEditor文本编辑器,并配置图片上传功能 之 方法一 中介绍了ckeditor的安装和配置方法,其实还有另一种新方法,不用IMCE模块. 不过需要ckfinder的JS库,可以 ...
- 解决react不能往setState中传key作为参数的办法(文章最后实现了传递key做参数的办法)
读者朋友可以直接看最后一个分割线下面的那部分!利用方括号语法来动态的访问对象的属性,实现当参数为属性名的传递; 有时候我们需要每次单独设置众多state中的一个,但是,都是进行相同的操作,这时候如果每 ...
- JS读取本地IP地址信息
HTML <div> <p>点击下面的按钮,查看本地IP信息</p> <span class="span">点击查看</spa ...
- SVN - Checksum mismatch while updating
Go to the folder with the file causing problems Execute command svn update --set-depth empty (note: ...
- 水库抽样Reservoir Sampling(蓄水池问题)
知识复习 空间亚线性算法:由于大数据算法中涉及到的数据是海量的,数据难以放入内存计算,所以一种常用的处理办法是不对全部数据进行计算,而只向内存里放入小部分数据,仅使用内存中的小部分数据,就可以得到 ...
- C# 后台添加Log信息
我们在做项目的时候,经常会使用到Log日志,今天分享一下如何在后台添加Log信息 创建一个写Log的方法: public void WriteLog(string Action) { try { st ...
- Python爬虫教程-01-爬虫介绍
Spider-01-爬虫介绍 Python 爬虫的知识量不是特别大,但是需要不停和网页打交道,每个网页情况都有所差异,所以对应变能力有些要求 爬虫准备工作 参考资料 精通Python爬虫框架Scrap ...
- php foreach 报 “Cannot create references to elements of a temporary array expression”
今天在项目中用php foreach数据库查询结果时,为了方便没有判断数据是否存在,直接用(array)强制转换数据时,刚开始网页始终打不开,就报502,一头懵,突然间php报“Cannot crea ...
- php自动获取上一个月的起始时间
1.借鉴评论的方法[20170309 edit] function get_month_start_end($timestamp) { !empty($timestamp) OR $timestamp ...