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

  1. CSS3:flex布局应用

    想把先前的整理的东西贴出来,怎奈总是有额外事情发生,额,教训电脑要离水杯远点~~ 推荐一本书,<编写可维护的Javascript>这是Nicbolas C.Zakas写的,他的<Ja ...

  2. [Css] css3的flex布局

    flex思维导图 {"name":"flex","children":[{"name":"传统布局方式&quo ...

  3. 第103天:CSS3中Flex布局(伸缩布局)详解

    一.Flex布局 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ display: flex; } 行 ...

  4. CSS3之flex布局

    若要使用flex布局,需在父元素上声明" display : flex ",这样它所有的直系子元素就成为flex元素 1.居中 1)垂直居中:align-items : cente ...

  5. CSS3的flex布局

    flex的一些属性 CSS3中引入了另一种框--flexbox,flexbox有一些block和inline不同的性质,比如: 自适应子元素(flex item,又称伸缩项目)的宽度 伸缩项目的flo ...

  6. 使用css3的Flex布局实现列表展示

    实现效果图如下: 通过css3样式实现(部分代码): .box { display: flex; flex-wrap:wrap; justify-content:space-between; alig ...

  7. CSS3弹性伸缩布局(二)——flex布局

    上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...

  8. CSS3 Flex布局整理(一)

    一.说明 1.在以往的布局方案中,都是基于盒装模型,依赖display属性+position属性+float属性等. 他对于那些特殊布局非常不方便,比如,垂直居中等. 并且不同浏览器的盒模型还有些差异 ...

  9. CSS3弹性盒模型,Flex布局教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...

随机推荐

  1. Freebsd10.3(FreeBSD11 Beta1)使用手记

    Freebsd10.3(FreeBSD11 Beta1)使用手记 1.安装系统. 2.设置ssh2登录,并开启ftp. (1)编辑/etc/ssh/sshd_config文件,设置如下: Permit ...

  2. drupal中安装CKEditor文本编辑器,并配置图片上传功能 之 方法二

    drupal中安装CKEditor文本编辑器,并配置图片上传功能 之 方法一 中介绍了ckeditor的安装和配置方法,其实还有另一种新方法,不用IMCE模块. 不过需要ckfinder的JS库,可以 ...

  3. 解决react不能往setState中传key作为参数的办法(文章最后实现了传递key做参数的办法)

    读者朋友可以直接看最后一个分割线下面的那部分!利用方括号语法来动态的访问对象的属性,实现当参数为属性名的传递; 有时候我们需要每次单独设置众多state中的一个,但是,都是进行相同的操作,这时候如果每 ...

  4. JS读取本地IP地址信息

    HTML <div> <p>点击下面的按钮,查看本地IP信息</p> <span class="span">点击查看</spa ...

  5. SVN - Checksum mismatch while updating

    Go to the folder with the file causing problems Execute command svn update --set-depth empty (note: ...

  6. 水库抽样Reservoir Sampling(蓄水池问题)

      知识复习 空间亚线性算法:由于大数据算法中涉及到的数据是海量的,数据难以放入内存计算,所以一种常用的处理办法是不对全部数据进行计算,而只向内存里放入小部分数据,仅使用内存中的小部分数据,就可以得到 ...

  7. C# 后台添加Log信息

    我们在做项目的时候,经常会使用到Log日志,今天分享一下如何在后台添加Log信息 创建一个写Log的方法: public void WriteLog(string Action) { try { st ...

  8. Python爬虫教程-01-爬虫介绍

    Spider-01-爬虫介绍 Python 爬虫的知识量不是特别大,但是需要不停和网页打交道,每个网页情况都有所差异,所以对应变能力有些要求 爬虫准备工作 参考资料 精通Python爬虫框架Scrap ...

  9. php foreach 报 “Cannot create references to elements of a temporary array expression”

    今天在项目中用php foreach数据库查询结果时,为了方便没有判断数据是否存在,直接用(array)强制转换数据时,刚开始网页始终打不开,就报502,一头懵,突然间php报“Cannot crea ...

  10. php自动获取上一个月的起始时间

    1.借鉴评论的方法[20170309 edit] function get_month_start_end($timestamp) { !empty($timestamp) OR $timestamp ...