关于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. Maven学习总结(二):安装

    一:Maven下载 下载地址:http://maven.apache.org/download.cgi 下载完成后,得到一个压缩包,解压,可以看到maven的组成目录 Maven目录分析 bin:含有 ...

  2. vue指令示例合集

    vue所有指令练习合集.这是个html文件,用chrome打开可查看结果. <!DOCTYPE html> <html lang="en" xmlns:v-on= ...

  3. HTTP(S)网络框架的设计

    0.麻烦 操作系统提供的网络接口都会令人不爽,要么太接近底层而使用不便,要么层次过高又不提供底层点的接口供设置参数.但是我们不能期望系统API做得很高级,因为没有绝对合适的网络库,必须定制化从而达到适 ...

  4. 剑指Offer-编程详解-二维数组中的查找

    题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...

  5. Android LinkedList和ArrayList的区别

    LinkedeList和ArrayList都实现了List接口,但是它们的工作原理却不一样.它们之间最主要的区别在于ArrayList是可改变大小的数组,而LinkedList是双向链接串列(doub ...

  6. android 原生 MediaPlayer 和 MediaCodec 的区别和联系(三)

    目录:     (4)Android 官方网站 对 MediaCodec的介绍 注:编解码器特定数据(Code-specific Data,简写为csd) 部分结合网上资料加入了补充和个人理解.请悉知 ...

  7. PRINCE2是什么意思?

    PRINCE2是一种长期以来公认的项目管理方法,在英国公共部门广泛应用,在私营企业界也发展成为事实上的应用方法. PRINCE2开发于1989年,是一种结构性的项目管理方法,其所有者OGC(英国商务部 ...

  8. Python进阶内容(一)--- 高阶函数 High order function

    0. 问题 # 本文将围绕这段代码进行Python中高阶函数相关内容的讲解 # 文中所有代码的兼容性要求为:Python 3.6,IPython 6.1.0 def addspam(fn): def ...

  9. Java和C# RSA加解密相互通信和使用公钥加密传输

    关于JAVA和C#加解密通讯的话,可以用这个BouncyCastle插件,会帮助你解决很多问题 http://www.bouncycastle.org/ //c#使用java给的公钥进行rsa加密 p ...

  10. [翻译] FLAnimatedImage

    FLAnimatedImage FLAnimatedImage is a performant animated GIF engine for iOS: FLAnimatedImage是一个播放gif ...