【前言】
总结讲解下弹性盒模型布局相关知识点,为以后课件做备录。本文简单讲解下Flex布局对子元素影响
【主体】
设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <style type="text/css"> *{ margin: 0; padding: 0; } .main_area{ width: 600px; height: auto; border: 1px solid red; margin: 100px auto; display: flex; display: -webkit-flex; /* Safari */ } .main_area div{ width: 200px; height: 300px; } .main_area div:nth-of-type(1){ float: right; background: red; } .main_area div:nth-of-type(2){ background: green; } .main_area div:nth-of-type(3){ background: blue; } </style> </head> <body> <div class="main_area"> <div></div> <div></div> <div></div> </div> </body> </html>
测试后将第一个div右浮,会发现无效(弹性盒子元素无法浮动)。
.
相关推荐
spring-flex-1.5.0.M2-dist.zip spring-flex-1.5.0.M2 spring-flex-1.5.0.M2.jar SBI
移动web端之flex布局笔记,包含案例和实战代码
flex弹性盒子布局实例,本次博客实例需要的一些资源,源代码,可自行下载研究,一起进步,共勉,一起加油
微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip ...
帮助理解flex属性。 1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 ...2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. align-self
注意:如果元素不是弹性盒对象的元素,则 flex-basis 属性不起作用。 flex: 1 实际上是三个属性的缩写:flex-grow: 1; flex-shrink: 1 flex-basis: auto; flex-grow 与 flex-basis 其实类似,区别在于,flex-...
1)弹性盒也叫伸缩布局盒模型 它是**<span>css3**引入的一种新的布局模式——**<span>flexbox**布局,即伸缩布局盒模型,用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局。相比之前的布局方式,更...
.box{ //行内元素的弹性布局 display: inline-flex;}.box{ display: flex;}设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素,称为Flex容器(flex container),简称”容器”...
spring-flex-1.5.0.RELEASE spring-flex-1.5.0.RELEASE spring-flex-1.5.0.RELEASE spring-flex-1.5.0.RELEASE
flex弹性布局 - 副本
flex布局
微信小程序源码FlexLayout布局-wechat-app-flexlayout-master
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、...
弹性盒模型布局的仿某宝个人中心页面,涉及rem,在线小图标的使用
Engineering-Guide-Flex-and-Rigid-Flex-PCBs
前端-flex布局案例
arcgis-viewer-builder-flex-3.6-src
flex多行布局弹性盒子
形象生动讲解CSS布局,Flex弹性布局生动形象的理解,更好的理解弹性布局
display: flex弹性布局